js通过FormData对象 异步提交文件 实现文件上传(附带参数)
程序员文章站
2022-07-03 09:25:02
1 文件上传 2 3 4 5 6 7 1 ......
1 <h5>文件上传</h5><hr/> 2 <form method="POST" action="" name="form" enctype="multipart/form-data"> 3 <input type="text" name="userid" value="${userid }"/> 4 <input type="text" name="companyid" value="${companyid }"/> 5 <input type="file" name="file"/> 6 <input type="submit" class="upload" value="上传"/> 7</form>
1 <script type="text/javascript"> 2 $(".upload").click(function(){ 3 //通过FormData对象 异步提交文件 返回提交结果 4 var img = document.form.file.files[0]; 5 var companyid = $("[name='companyid']").val(); 6 var userid = $("[name='userid']").val(); 7 var fm = new FormData(); 8 fm.append('file', img); 9 fm.append('userid', userid); 10 fm.append('companyid', companyid); 11 var url = saasurl+"/management/uploadFile"; 12 $.ajax({ 13 url:url, 14 cache:false, 15 type:"POST", 16 data:fm, 17 headers:{"X-usertoken":sessionStorage.getItem("token")}, 18 processData:false, 19 contentType:false, 20 complete:function(xhr){ 21 if(xhr.readyState==4&&xhr.status==200){ 22 var result = xhr.responseText; 23 var json = JSON.parse(result); 24 var code =json.ret_code; 25 if(code=="000"){ 26 var url = json.fileUrl; 27 var name = json.fileName; 28 var innerHtml = "<a style='cursor: pointer;color: yellow;' target='_blank' href="+url+"> 点击查看 </a>"; 29 $(".msg").html("上传成功("+innerHtml+")!"); 30 $(".alerttop").fadeToggle(); 31 }else{ 32 $(".myadmin-alert").removeClass("alert-success").addClass("alert-warning"); 33 $(".msg").text(json.ret_msg); 34 $(".alerttop").fadeToggle(); 35 } 36 37 }else{ 38 $(".myadmin-alert").removeClass("alert-success").addClass("alert-warning"); 39 $(".msg").text("上传失败!"); 40 $(".alerttop").fadeToggle(); 41 } 42 43 } 44 }) 45 return false; //防止刷新页面 46 });47 </script>
推荐阅读
-
js通过FormData对象 异步提交文件 实现文件上传(附带参数)
-
jquery.form.js插件实现表单异步提交(文件上传)
-
jquery.form.js插件实现表单异步提交(文件上传) 表单
-
使用html5的FormData对象,通过 Ajax表单异步提交文件数据
-
使用html5的FormData对象,通过 Ajax表单异步提交文件数据
-
js通过FormData对象 异步提交文件 实现文件上传(附带参数)
-
AjaxFileUpload实现文件异步上传(AjaxFileUpload.js文件下载及参数介绍)
-
AjaxFileUpload实现文件异步上传(AjaxFileUpload.js文件下载及参数介绍)
-
使用html5的FormData对象,通过 Ajax表单异步提交文件数据