jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传。
1、引入AjaxFileUpload插件相关的js
<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script> <script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
备注:测试发现,ajaxfileupload对jQuery版本是有要求的,在使用中ajaxfileupload和jQuery对应的js版本要一致,不然会导致异常发生,可以从ajaxfileupload官网下载,避免版本冲突。
2、实现上传功能代码
html
<input type="file" name="business_licence" id="business_licence" onchange="upload_image('business_licence');">
js处理
//上传缩略图 function upload_image(upfile_name){ var loadi = layer.load('文件上传中…'); $.ajaxFileUpload({ url:'<{site_url('upload/index')}>?file_name='+upfile_name, secureuri:false, fileElementId:upfile_name, dataType: 'json', success: function (data) { layer.close(loadi) if(data.state == 'SUCCESS') { $("#"+upfile_name+"_pic").val(data.url); } else { layer.msg(data.state,2,-1); return false; } } }); }