方法1:该方法适合ie9以上,因为ie9以上支持formdata。
页面代码:
<div class="step-panel" style="height:120px;position: relative"> <div> <div class="import" id="import" οnclick="document.getElementById('articleImageFile').click();" style="width: 118px;height: 30px;text-align: center;line-height: 30px;background-color: #1890FF;color: white;border-radius: 5px;float: left;cursor:pointer;">导入csv</div> <div class="nameForFile" id="nameForFile" style="line-height: 30px;margin-left: 130px;color: black"></div> <input hidden id="articleImageFile" name="excelFile" type="file" class="x-file" accept=".xls,.xlsx"> </div> <button class="sendSubmit" style="width: 118px;height: 30px;text-align: center;line-height: 30px;background-color: #1890FF;color: white;border-radius: 5px;cursor:pointer;position: absolute;top: 80px;left: 450px;display: none;border: none">发放卡券</button> </div>
js模块代码:
importCards: function (obj) { var name = $("#articleImageFile").val(); formData.append("file",$("#articleImageFile")[0].files[0]); formData.append("name",name);//可以使用formData.append()传递多个参数 objName = obj.value; var fileName = objName.substring(objName.lastIndexOf(".")+1).toLowerCase(); var fileRealName = checkStep1.getFileName(objName); $(".nameForFile").text(fileRealName) if(fileName !="xls" && fileName !="xlsx") { layer.msg("请选择Excel格式文件上传(xls、xlsx)!"); obj.value = ""; return false; //阻止提交 }else { $(".sendSubmit").css('display','block'); console.log($("#articleImageFile")[0].value) } },
sendCardsSubmit: function () { $.ajax({ url :originUrl+ 'bind/batchBind/'+couponBatchId, type : 'POST', async : false, data : formData, // 告诉jQuery不要去处理发送的数据 processData : false, // 告诉jQuery不要去设置Content-Type请求头 contentType : false, beforeSend:function(){ layer.load(); }, success : function(result) { console.log(result) if(result.result==0){ layer.msg("发放成功!"); $('.sendSubmit').attr('disabled', true) }else { layer.msg("发放失败!"); } }, complete: function () { layer.closeAll('loading'); } }); }
方法二:该方法大多时候用在需要兼容低版本ie浏览器的时候
页面代码:
<form id="uploadFileForm" name="uploadFileForm" enctype="multipart/form-data" method="post"> <input type="hidden" id="param1" name="param1" value="123"/> <input type="hidden" id="param2" name="param2" value="测试参数"/> <div id="uploadFileTableDiv" style="margin-left:10%;"> <table border="1" width="80%"> <tr> <td style="padding:10px;"> <span style="float:left;">上传文件: </span> </td> <td style="padding:10px;"> <input type="file" id="attach" name="attach" size="25" style="height:30px;" /> </td> </tr> <tr> <td colspan="2" style="padding:10px;padding-left:50px;"> <button id="submit_btn" type="button" class="btn btn-default" οnclick="javascript:submitFile();"> 上传文件 </button> </td> </tr> </table> </div> </form>
js代码:
function submitFile(){ var attach = document.getElementById("attach").value; alert("attach: " + attach); if(attach == undefined || attach == ""){ alert("请选择文件"); return; } uploadFileForm.action = "/tools/uploadFileAction"; uploadFileForm.submit(); }
这种方法会在提交的时候强制刷新页面,并且参数也不是很好获取,很是头疼,所以建议用方法3.
方法三:
页面代码:
<form id="uploadFileForm2" name="uploadFileForm2" enctype="multipart/form-data" method="post"> <div id="uploadFileTableDiv2" style="margin-left:10%;"> <table border="1" width="80%"> <tr> <td style="padding:10px;"> <span style="float:left;">上传文件: </span> </td> <td style="padding:10px;"> <input type="file" id="attach2" name="attach2" size="25" style="height:30px;" /> </td> </tr> <tr> <td colspan="2" style="padding:10px;padding-left:50px;"> <button id="submit_btn2" type="button" class="btn btn-default" οnclick="javascript:ajaxSubmitFile();"> 上传文件 </button> </td> </tr> </table> </div> </form>
js代码:
//在表单上追加input hidden元素 存放其他参数 function appendInputElementForForm(formId,inputName,inputValue){ var myh = document.createElement("input"); myh.type = "hidden"; myh.value = inputValue; myh.id = inputName; myh.name = inputName; document.getElementById(formId).appendChild(myh); alert(document.getElementById(inputName).value); } //20170207 文件上传ajax Form表单提交 function ajaxSubmitFile(){ var attach = document.getElementById("attach2").value; alert("ajaxSubmitFile attach2: " + attach); if(attach == undefined || attach == ""){ alert("请选择文件"); return; } appendInputElementForForm( "uploadFileForm2", "param1", "123"); appendInputElementForForm( "uploadFileForm2", "param2", "测试参数"); $(‘#uploadFileForm2‘).ajaxSubmit({ type:"post", url:"/tools/ajaxUploadFileAction", data:$(‘#uploadFileForm2‘).serialize(), dataType:"json", error:function(data){ alert(data); }, success:function(data){ alert("ajaxSubmit上传成功"); alert("下载地址: " + data.data.attachment); } }); }
这种方法主要用jquery.form.js支持的Ajaxsubmit进行文件上传,所以在用的时候要注意引进相关的依赖。