首页 > 代码库 > 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插件)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。