如图所示要实现的异步图片上传功能，一直被这个功能困扰了好久，昨天终于算是搞定了，学习了两个插件ajaxfileupload和jquery-form的使用方法，以及总结了它们的特点和注意事项，废话少说直接上代码（如果想看效果的话还是要放在服务器上进行测试的）：
ajaxfileupload：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .upload-box{ width: 150px; height: 150px; overflow: hidden; position: relative; border: 1px solid #ccc; } .upload-box .btnfile{ position: absolute; top: 0; left: 0; z-index: 99; width: 150px; height: 150px; opacity: 0; } .upload-box .divimg{ width: 150px; height: 150px; padding: 10px; box-sizing: border-box; text-align: center; vertical-align: middle; overflow: hidden; } .upload-box .divimg .defaultImg{ font-size: 100px; color: #999; font-weight: bold; } </style> </head> <body> <div class="upload-box"> <!-- input[type="hidden"]的作用：input[type="file"]不允许填写vale值，这样path值赋予隐藏的input在form表单提交的时候同样可以上传图片路径 --> <input type="hidden" name="spec_logo" value=""/> <!-- file_name：后台定义的file控件name --> <input type="file" id="btnfile-1" class="btnfile" name="file_name" value="上传" /> <div class="divimg"> <span class="defaultImg">+</span> </div> </div> <div class="upload-box"> <input type="hidden" name="spec_logo" value=""/> <input type="file" id="btnfile-2" class="btnfile" name="file_name" value="上传" /> <div class="divimg"> <span class="defaultImg">+</span> </div> </div> <script src="../js/jquery-1.7.2.min.js"></script> <script src="../js/ajaxfileupload.js"></script> <script> //项目中遇到的问题：如果单个页面中需要显示多个图片上传的div的话，就需要多个不同的file控件ID供调用， //如果upload-box是动态生成的，那么就要想办法生成不同的file控件ID $(document).ready(function() { //图片上传地址 var upload_url = '<?= base_url('tupload/single?bucket=saler')?>'; //这里直接用change事件只能执行一次，改为on事件正常执行,当选择好图片打开，关闭窗口时触发此事件 $('body').on('change', 'input[name="file_name"]', function() { var id = $(this).attr('id'); var divimg = $(this).siblings('.divimg'); var spec_logo = $(this).siblings('input[name="spec_logo"]'); $.ajaxFileUpload({ url: upload_url, //处理图片的脚本路径 type: 'post', //提交的方式 secureuri: false, //是否启用安全提交 fileElementId: id, //file控件ID dataType: 'json', //服务器返回的数据类型 success: function (data, status){ //提交成功后自动执行的处理函数 //后台定义的图片路径规则 var upload_ret = data.data; var path = upload_ret.path;//半路径 var full_path = upload_ret.full_path;//全路径 divimg.empty(); divimg.append('<img src="'+ full_path +'" width="100%"/>'); spec_logo.val(path); }, error: function(data, status, e){ //提交失败自动执行的处理函数 alert(e); } }) }); }); </script> </body> </html>
jquery-form：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .imgBox{ width: 150px; height: 150px; overflow: hidden; position: relative; border: 1px solid #ccc; } .imgBox .btnfile{ position: absolute; top: 0; left: 0; z-index: 99; width: 150px; height: 150px; opacity: 0; } .imgBox .divimg{ width: 150px; height: 150px; padding: 10px; box-sizing: border-box; text-align: center; vertical-align: middle; overflow: hidden; } .imgBox .divimg .imgDefault{ font-size: 100px; color: #999; font-weight: bold; } </style> </head> <body> <form id="fm1" method="post"> <div class="imgBox"> <!-- file_name：后台定义的file控件name --> <input type="file" class="btnfile" name="file_name" value="提交"/> <div class="divimg"> <span class="imgDefault">+</span> </div> </div> <!-- <div class="imgBox"> <input type="file" class="btnfile" name="file_name" value="提交"/> <div class="divimg"> <span class="imgDefault">+</span> </div> </div> --> </form> <script src="../js/jquery-1.7.2.min.js"></script> <script src="../js/jquery-form.js"></script> <script> //jquery-form插件可以用在单个页面或者一个form表单里面只显示一个图片上传div的情况下 //实践结果，当一个form表单里面存在多个imgBox的时候，更换图片的时候会发生混乱 $(document).ready(function() { //图片上传地址 var upload_url = '<?= base_url('tupload/single?bucket=saler')?>'; $('.btnfile').change(function() { var target = $(this); var divimg = $(this).siblings('.divimg'); $("#fm1").ajaxSubmit({ url: upload_url, type: "post", success: function (data) { $('.divimg').empty(); //后台定义的图片路径规则 var upload_ret = data.data; var path = upload_ret.path;//半路径 var full_path = upload_ret.full_path;//全路径 //IE显示图片会默认加上<PRE></PRE>，着必须要把去除掉才能在低版本ie显示 //data = data.replace("<PRE>", "").replace("</PRE>", ""); $(".divimg").append("<img src='" + full_path + "' width='100%'/>"); //清空file控件里面的值 target.after(file.clone().val("")); target.remove(); } }); }); }); </script> </body> </html>
根据自己的需要选择使用哪个插件更合适