这阵子做了一个后台管理素材的功能，上传素材需要缩略图+素材文件。 所以避免不了使用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能限制哪些文件呢。