ajax图片上传（ajaxfileupload.js插件）

Posted 2020-08-22

向后台交互方式：

　　1.form表单提交，action=“url”

　　2.ajax异步提交

区别：　　

　　form在提交之后无法获得后台的回调参数，只能由后台工作人员控制提交成功之后的路径跳转；优点是可以直接提交文件，如：图片、txt文件等；

　　ajax很好的处理字符格式的提交并获取提交成功之后的回调参数，但是无法提交图片。

　　ajax提交图片只能把图片格式转化为进制流模式

解决方式：

1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="ajaxfileupload.js"></script>

html:

1  <img alt="" id="businessLicenceuploadImage" src="" style="width:150px;height: 160px;">
2  <input type="file" id="businessLicenceImage" name="files" class="file" onChange="ajaxFileUploads(‘businessLicenceImage‘,‘businessLicenceuploadImage‘,‘businessLicenceNumberElectronic‘);"/></a>
3  <input type="hidden" class="text w200" name="businessLicenceNumberElectronic" id="businessLicenceNumberElectronic"/>
4                                          

js:

 1                 function ajaxFileUploads(myBlogImage,imgId,img){
 2                     $.ajaxFileUpload({
 3                         url: ‘‘,
 4                         secureuri:false,                      //是否启用安全提交,默认为false
 5                         fileElementId:myBlogImage,           //文件选择框的id属性
 6                         dataType:‘json‘,                       //服务器返回的格式,可以是json或xml等
 7                         fileSize:5120000,
 8                         allowType:‘jpg,jpeg,png,JPG,JPEG,PNG‘,
 9                         success:function(data, status){        //服务器响应成功时的处理函数
10                             if( true == data.success){     //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
11                                 $("img[id=‘"+imgId+"‘]").attr("src", "${imgServer}"+data.result);
12                                 $("#"+img).val(data.result);
13                                 alert(‘图片上传成功‘);
14                             }
15                         },
16                         error:function(data, status, e){ //服务器响应失败时的处理函数
17     　　　　　　　　　　　　　　　　alert(e);
18                         }
19                     });
20                 }