首页 > 代码库 > ajax图片上传(ajaxfileupload.js插件)

ajax图片上传(ajaxfileupload.js插件)

向后台交互方式:

  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                 }    

 

ajax图片上传(ajaxfileupload.js插件)