function saveUser() {

            var file = document.getElementById("file").files[0]

            //原生ajax实现文件上传

            var formData = new FormData()

            if (file) {

                formData.append("file", file)

                console.log(file)

            }

            //得到xhr对象

            var xhr = null

            if (XMLHttpRequest) {

                xhr = new XMLHttpRequest()

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP")

            }

            xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式，url，异步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data")

            xhr.onload = function () {

                var data = xhr.responseText    //得到返回值

                console.log(data)

            }

            xhr.send(formData)

        }

ajax的表单提交只能提交data数据到后台，没法实现file文件的上传还有展示进度功能，这里用到form.js的插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。

需要解释下我的结构， #upload-input-file 的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能， #upload-input-btn 的button标签是展示给用户的按钮，因为需要样式的美化。上传完成生成的文件名将会显示在 .upload-file-result 里面， .progress 是进度条的位置，先让他隐藏加上 hidden 的class， .progress-bar 是进度条的主体， .progress-bar-status 是进度条的文本提醒。

去掉hidden的class，看到的效果是这样的

[图片上传失败...(image-2c700a-1548557865446)]

将上传事件绑定在file的input里面，绑定方式就随意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'//上传步骤 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden")progress.width(percentVal)status.html(percentVal)}, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'progress.width(percentVal)status.html(percentVal)console.log(percentVal, position, total)}, success: function (result) { percentVal = '100%'progress.width(percentVal)status.html(percentVal)//获取上传文件信息 uploadFileResult.push(result)// console.log(uploadFileResult)$(".upload-file-result").html(result.name)$("#upload-input-file").val('')}, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown)$(".upload-file-result").empty()} })

[图片上传失败...(image-3d6ae0-1548557865446)]

[图片上传失败...(image-9f0adf-1548557865446)]

更多用法可以 参考官网

HTML5 file组件的新属性

accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。

multiple：是否允许选择多个文件

HTML5 页面代码修改后

<img width="400" height="250"/><br />

<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>

<input type="button" value="上传图片" onclick="uploadFile()" /><br />

<div id="parent">

<div id="son"></div>

</div>

accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。

如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码

function printFileInfo(){

var picFile = document.getElementById("pic")

var files = picFile.files

for(var i=0i<files.lengthi++){

var file = files[i]

var div = document.createElement("div")

div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +

" , 文件类型："+ file.type +" , 文件大小:"+ file.size

document.body.appendChild( div)

}

}

既然可以循环多文件的话，就可以尝试多文件上传了。

1、首先创建 XMLHttpRequest 对象

//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的

var xhr = new XMLHttpRequest()

2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件

error：在请求发生错误时触发。

对应上传时发生错误导致的上传失败：uploadFailed()

//上传失败

function uploadFailed(evt) {

alert("上传失败")

}

progress：在接收相应期间持续不断触发。

对应上传进度方法：onprogress()

/**

* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次

*/

function onprogress(evt){

var loaded = evt.loaded //已经上传大小情况

var tot = evt.total //附件总大小

var per = Math.floor(100*loaded/tot) //已经上传的百分比

$("#son").html( per +"%" )

$("#son").css("width" , per +"%")

}

最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。

//上传文件

function uploadFile() {

//将上传的多个文件放入formData中

var picFileList = $("#pic").get(0).files

var formData = new FormData()

for(var i=0i<picFileList.lengthi++){

formData.append("file" , picFileList[i] )

}

//监听事件

xhr.upload.addEventListener("progress", onprogress, false)

xhr.addEventListener("error", uploadFailed, false)//发送文件和表单自定义参数

xhr.open("POST", "upload")

//记得加入上传数据formData

xhr.send(formData)

}

---