jQuery仿淘宝无刷新上传产品图片
- WBOYOriginal
- 2016-06-07 11:36:251444browse
淘宝卖家的上传产品多图片功能做的很强大，本文就分享下淘宝的单图片上传。代码很简单，引用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 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元