这阵子做了一个后台管理素材的功能，上传素材需要缩略图+素材文件。 所以避免不了使用input type="file"
我们都知道，file上传文件时可以限制文件类型：accept这个属性；但是只在FF和chrome中有效。
这里主要讲一下 更新素材 的一些操作（界面大致是这样）：
更新文件流程
当用户点击更新素材的时候，界面应该让用户知道自己更新的是哪一个素材，所以后端把素材的缩略图、素材名、素材文件名都返回给前端，这是前端酌情进行赋值。
<div class="upload_field">
<label for="thumb"><i class="required"></i>标识缩略图</label>
<div class="upload_thumb">
<input type="file" id="thumb" title="" name="thumb" value="" accept="image/png"/>
<div class="upload_preview" title="">
<img src="原先素材缩略图地址">
</div>
</div>
</div>
看Dom元素可以看出，我的做法是用div模拟出原素材文件的缩略图，但input file是没法赋值的（原因如下），所以更新素材时候前端与后端达成共识，如果input的值为空，就不传这个input值的字段给后端，素材缩略图就没有修改。
在 HTML 文档中 ，<input type="file"> 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file-upload 元素的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略
来看看具体操作：
function preview(input) {
if (input.files && input.files[0]) {
var fileName = input.files[0].name.split('.').slice(-1).toString();
//限制文件格式
switch(fileName) {
case 'png':
var reader = new FileReader();
reader.onload = function (e) {
var $img = $('<img/>');
$img.attr('src', e.target.result);
$('.upload_preview').html('');
$('.upload_preview').append($img);
$('.upload_preview').css({'background-color': '#fff', 'border': '1px solid #e0e0e0'});
};
reader.readAsDataURL(input.files[0]);
//获取图片名字
var packName = input.value.split('\\').slice(-1);
$('[name=thumb]').attr('title', packName);
break;
default:
alert("请上传png格式图片");
$('[name=thumb]').val('');
return;
};
};
}
然后再监听一下input变化，调用这个方法：
$('[name=thumb]').change(function() {
preview(this);
});
原以为美滋滋的解决了需求，但是又发现一个问题：
当file选择文件弹窗出现之后，用户点击取消，input 的值就被清空了。那么问题就来了，如果用户一开始选中了一个文件，接下来用户再次点击上传文件的时候，手抖点击了取消，原本input的值就被清空了... my god！
一阵沉思，input这个值我不能动态修改... 我又不能把之前用户传的值清空... 对 定义一个变量储存旧的值，说干就干
HTML代码
<div class="upload_field">
<label for="thumb"><i class="required"></i>标识缩略图</label>
<div class="upload_thumb">
<input type="file" id="thumb" title="" name="thumb" value="" accept="image/png"/>
<div class="upload_preview" title="">
<img src="原先素材缩略图地址">
</div>
</div>
</div>
JS代码
//更新素材
//因为input type=file 选择文件时点击取消之后 之前选中的文件会被清空
//所以新建个变量保存原来值
var oldThumbVal = $('[name=thumb]').val();
function preview(input) {
if (input.files && input.files[0]) {
var fileName = input.files[0].name.split('.').slice(-1).toString();
//限制文件格式
switch(fileName) {
case 'png':
var reader = new FileReader();
reader.onload = function (e) {
var $img = $('<img/>');
$img.attr('src', e.target.result);
$('.upload_preview').html('');
$('.upload_preview').append($img);
$('.upload_preview').css({'background-color': '#fff', 'border': '1px solid #e0e0e0'});
};
reader.readAsDataURL(input.files[0]);
//获取图片名字
var packName = input.value.split('\\').slice(-1);
$('[name=thumb]').attr('title', packName);
oldThumbVal = input.files[0];
break;
default:
alert("请上传png格式图片");
$('[name=thumb]').val('');
return;
};
};
if (oldThumbVal) {
$('[name=thumb]').attr('title', oldThumbVal.name);
};
}
//上传更新素材思路
var formData = new FormData();
if(oldThumbVal) {
if($('[name=thumb]').val()) {
formData.append('thumb', $('[name=thumb]')[0].files[0]);
}else {
formData.append('thumb', oldThumbVal);
};
};
就搞定了~
清空file值方法：
var file = doucment.getElementById('file');
1. file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
2. file.outerHTML = file.outerHTML; //重新初始化了file的html
3. $('[name=pack]').val('');
accept能限制哪些文件呢。
| 拓展名 | MIME类型 | MIME类型 |
|---|---|---|
| *.3gpp | audio/3gpp, video/3gpp | 3GPP Audio/Video |
| *.ac3 | audio/ac3 | AC3 Audio |
| *.asf | allpication/vnd.ms-asf | Advanced Streaming Format |
| *.au | audio/basic | AU Audio |
| *.css | text/css | Cascading Style Sheets |
| *.csv | text/csv | Comma Separated Values |
| *.doc | application/msword | MS Word Document |
| *.dot | application/msword | MS Word Template |
| *.dtd | application/xml-dtd | Document Type Definition |
| *.dwg | image/vnd.dwg | AutoCAD Drawing Database |
| *.dxf | image/vnd.dxf | AutoCAD Drawing Interchange Format |
| *.gif | image/gif | Graphic Interchange Format |
| *.htm | text/html | HyperText Markup Language |
| *.html | text/html | HyperText Markup Language |
| *.jp2 | image/jp2 | JPEG-2000 |
| *.jpe | image/jpeg | JPEG |
| *.jpeg | image/jpeg | JPEG |
| *.jpg | image/jpeg | JPEG |
| *.js | text/javascript, application/javascript | JavaScript |
| *.json | application/json | JavaScript Object Notation |
| *.mp2 | audio/mpeg, video/mpeg | MPEG Audio/Video Stream, Layer II |
| *.mp3 | audio/mpeg | MPEG Audio Stream, Layer III |
| *.mp4 | audio/mp4, video/mp4 | MPEG-4 Audio/Video |
| *.mpeg | video/mpeg | MPEG Video Stream, Layer II |
| *.mpg | video/mpeg | MPEG Video Stream, Layer II |
| *.mpp | application/vnd.ms-project | MS Project Project |
| *.ogg | application/ogg, audio/ogg | Ogg Vorbis |
| application/pdf | Portable Document Format | |
| *.png | image/png | Portable Network Graphics |
| *.pot | application/vnd.ms-powerpoint | MS PowerPoint Template |
| *.pps | application/vnd.ms-powerpoint | MS PowerPoint Slideshow |
| *.ppt | application/vnd.ms-powerpoint | MS PowerPoint Presentation |
| *.rtf | application/rtf, text/rtf | Rich Text Format |
| *.svf | image/vnd.svf | Simple Vector Format |
| *.tif | image/tiff | Tagged Image Format File |
| *.tiff | image/tiff | Tagged Image Format File |
| *.txt | text/plain | Plain Text |
| *.wdb | application/vnd.ms-works | MS Works Database |
| *.wps | application/vnd.ms-works | Works Text Document |
| *.xhtml | application/xhtml+xml | Extensible HyperText Markup Language |
| *.xlc | application/vnd.ms-excel | MS Excel Chart |
| *.xlm | application/vnd.ms-excel | MS Excel Macro |
| *.xls | application/vnd.ms-excel | MS Excel Spreadsheet |
| *.xlt | application/vnd.ms-excel | MS Excel Template |
| *.xlw | application/vnd.ms-excel | MS Excel Workspace |
| *.xml | text/xml, application/xml | Extensible Markup Language |
| *.zip | aplication/zip | Compressed Archive |
网友评论