jQuery仿淘宝无刷新上传产品图片

淘宝卖家的上传产品多图片功能做的很强大，本文就分享下淘宝的单图片上传。代码很简单，引用jquery.wallform.js即可。

上传表单和预览图片区域$("body").on("change", ".photoimg", <br> function() { <br>     var obj = $(this); <br>     var imageForm = obj.parents(".imageform"); <br>     var preview_img = imageForm.next(".preview_img"); <br>     var btn = imageForm.find(".up_btn"); <br>  <br>     imageForm.ajaxForm({ <br>         target: preview_img, <br>         beforeSubmit: function() { <br>             imageForm.next("div.preview_img").html(""); <br>             preview_img.hide(); <br>             btn.hide(); <br>         }, <br>         success: function() { <br>             preview_img.show(); <br>             btn.show(); <br>         }, <br>         error: function() { <br>             btn.show(); <br>             preview_img.hide(); <br>         } <br>     }).submit(); <br> });通过JS绑定change事件来提交单个图片上传表单$("body").on("change", ".photoimg", <br> function() { <br>     var obj = $(this); <br>     var imageForm = obj.parents(".imageform"); <br>     var preview_img = imageForm.next(".preview_img"); <br>     var btn = imageForm.find(".up_btn"); <br>  <br>     imageForm.ajaxForm({ <br>         target: preview_img, <br>         beforeSubmit: function() { <br>             imageForm.next("div.preview_img").html(""); <br>             preview_img.hide(); <br>             btn.hide(); <br>         }, <br>         success: function() { <br>             preview_img.show(); <br>             btn.show(); <br>         }, <br>         error: function() { <br>             btn.show(); <br>             preview_img.hide(); <br>         } <br>     }).submit(); <br> });PHP后台处理上传图片if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { <br>     $name = $_FILES['photoimg']['name']; <br>     $size = $_FILES['photoimg']['size']; <br>  <br>     if (empty($name)) { <br>         echo '请选择要上传的图片'; <br>         exit; <br>     } <br>     $ext = extend($name); <br>     if (!in_array($ext, $extArr)) { <br>         echo '图片格式错误！'; <br>         exit; <br>     } <br>     if ($size > (1000 * 1024)) { <br>         echo '图片大小不能超过1M'; <br>         exit; <br>     } <br>     $image_name = time() . rand(100, 999) . "." . $ext; <br>     $tmp = $_FILES['photoimg']['tmp_name']; <br>     if (move_uploaded_file($tmp, $path . $image_name)) { <br>         echo '<img class="preview lazy" src="/static/imghwm/default1.png" data-src="' . $path . $image_name . '" alt="jQuery仿淘宝无刷新上传产品图片" >'; <br>     } else { <br>         echo '上传出错了！'; <br>     } <br>     exit; <br> }PHP仿淘宝上传演示教程地址：http://www.sucaihuo.com/js/513.html

PHP+jQuery+Ajax仿淘宝多上传按钮单文件上传.rar ( 27.98 KB 下载：144 次 )

AD：真正免费，域名+虚机+企业邮箱=0元