关于js上传的一个例子

作者：Yajie.           QQ:878182159      坐标：长沙

1,置空一个type为file的input.

当上传执行完毕后，肯定是要置空input内的文件的。网上有很多置空的方法，基本都是复制黏贴来的。比如：

file.outerHTML = file.outerHTML;

这个方法用了之后确实能清空input，但是input不在触发change事件。所以这个方法是不能使用的。

最简单的方法。

$(file).val("");

2.input内的文件获取。

input上传的文件都存在 file.files里面。这是一个obj类数组对象。有length属性，但不是数组。最后一个元素是一个函数。它会调用浏览器的native方法来监听files

内的元素是否改变。

if(file.files[file.files.length-1] instanceof Function){

console.log(file.files[file.files.length-1]);

}

运行结果返回changed;

3.input判断是否为多文件上传。

很简单。直接查看multiple属性是否为真。但是大部分的上传插件都是采用的穿件多个input来上传‘假’多文件上传。比如fileInput插件。

4.文件后缀的截取

var imgPath = $("#uploadFile>.fileCase").val();
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);

var fileName= imgPath.substr(imgPath.lastIndexOf('\\') + 1);

5.ajax上传：

var form = new FormData();
var file=$("#uploadFile>.fileCase")[0].files[0];
if(file==null){
$("#back_err_case").modal("show");
$("#back_err_msg").text("并没有选择文件");
return;
}
    form.append("file",file); 
$.ajax({
type: "POST",
url: "url",
data: form,
cache: false,
dataType:"json",
processData: false,
               contentType: false,
success: function(data) {
...
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
...
}
});
}

另外其实大部分的上传插件都是ajax上传来的。比如fileInput.所以如果你要对下载的内容进行权限控制可以在源码中的ajxa内加一小段hearders.以下为fileInput内的源码。

settings = $.extend(true, {}, {
                xhr: function () {
                    var xhrobj = $.ajaxSettings.xhr();
                    return self._initXhr(xhrobj, previewId, self.getFileStack().length);
                },
                url: self.uploadUrl,
                type: 'POST',
                dataType: 'json',
                data: self.formdata,
                cache: false,
                processData: false,
                contentType: false,
                beforeSend: fnBefore,
                success: fnSuccess,
                complete: fnComplete,
                headers:{
"TOKEN":token
    },
                error: fnError
            }, self.ajaxSettings);
            self.ajaxRequests.push($.ajax(settings));

希望能对看到本文的人提供帮助。另外极度鄙视那些复制黏贴别人文章的人。