前端文件上传一整套流程（兼容IE8，解决 input标签必须主动点击等问题）

1.基本思路

在谷歌下以<input type=’file’/>为基本的条件，并且使他隐藏，通过点击提交按钮被动触发上传文件的事件，这里不需要用到表单提交的相关问题，在js方面，使用formData，通过获取<input type=”file”>标签的files属性，来获得文件相关的内容，之后再将后台所需的参数加上就可以进行ajax请求上传了。

2.IE8下的处理

首先需要使用ajaxSubmit的插件，需要引入以下依赖包，但是注意，ie8下的只能识别1.x 的JQuery，不然会报错说（不支持ajaxSubmit的方法）

<script src="../../js/jquery-latest.js"></script>

<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

<script src="../../js/jquery.form.js"></script>

然后需要以form表单的形式提交，且必须要有enctype属性，同时这里要特别注意的是表单不能嵌套，如果出现这样的问题，有两种解决的方式，一种是上传的时候，直接使用原表单，但是请求和上传相关的接口，一种是在外面写一个新的表单，加上自己所需要的那些数据，第一种显然是更简单的.

<form id="gp" method="post" enctype="multipart/form-data"></form>

之后就是请求ajax的接口，但是注意这里需要将后台返回的数据，转化为json的格式。

还有一个问题就是关于ie8下必须手动触发，不然会显示拒绝访问，这其中可以用一个div包裹<input type=”file”>标签来解决，同时要注意设置css样式，注意谷歌下和ie8下<input type=”file”>标签的按钮位置不同。

3.所有代码

以下代码基于layui

（1）html

//如果最外层还有form，那么这个form标签可以不要
<form class="layui-form" enctype="multipart/form-data" id="fileLoad">
    <div class="layui-row">
        <div class="layui-form-item schedule-item width100">
            <label class="layui-form-label">附件：</label>
            <div class="layui-input-block ml80" id="fileUp">
                //自己所需要传的值
                <input type="text" name="sceneValue" value="400200101" style="display: none"/>
                 <input type="text" name="resourceType" value="400100101" style="display: none"/>
                   <input type="text" name="resourceId" value="" style="display: none"/>
                   <input type="text" name="accessoryName" value="1.jpg" style="display: none"/>
                //自己所需要传的值结束
                //处理IE8下必须手动触发<input type="file">标签的问题，样式需要自己根据实际情况设置
                <div style="position:absolute;left:0px;top:-1px;height:30px;line-height:30px;width:68px;overflow:hidden">
                    <input type="file" id="mineFiles" name="file" style="margin-left:-155px;height:100%;line-height:100%;opacity:0;filter:alpha(opacity:0)"/>
                </div>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal openFile" id="upLoad">添加附件</button>
            </div>
        </div>
    </div>
</form>
           

（2）js

$(".openFile").click(function () { 
    //按钮被点击，触发标签点击事件，只有在非IE8下才有效果
    $("#mineFiles").click();
});
//实际的标签点击事件
$("#mineFiles").change(function (e) {
//IE8浏览器的判断
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
//一些需要动态的赋值
$("#accessoryName").val($("#mineFiles").val().split('\\')[2]);
$("#fileLoad").ajaxSubmit({
 url : PUB_AJAX_Url + "accessory/upload",
type : "post",
//应该为text
dataType : 'json',
success : function(data) {
console.log(data);
//相关的处理
}
error : function(data) {
console.log(data);}
});
}else{
//非IE8下使用formData
var formdata = new FormData();
formdata.append("sceneValue", "400200101");
formdata.append("resourceType", "400100101");
formdata.append("resourceId", fileData.resourceId);
//拿到相关的文件
var doc = document.getElementById("mineFiles");
formdata.append("file", doc.files[0]);
formdata.append("accessoryName", doc.files[0].name);
var typeArr = doc.files[0].name.split('.');
var myFileType = typeArr[typeArr.length - 1];
$.ajax({
url: PUB_AJAX_Url + "accessory/upload",
type: "post",
data: formdata,
cache: false,
processData: false,
contentType: false,
//开始loading
beforeSend: function () {
i = layer.msg('附件上传中...', {
icon: 16,
shade: [0.5, '#f5f5f5'],
scrollbar: false,
offset: '0px',
time: 100000
});
},
success: function (res) {
//相关处理
}
});
}