jQuery仿淘宝无刷新上传产品图片
- WBOY原创
- 2016-06-07 11:36:251460浏览
淘宝卖家的上传产品多图片功能做的很强大，本文就分享下淘宝的单图片上传。代码很简单，引用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>
});$("body").on("change", ".photoimg",
函数（）{
var obj = $(this); $("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>
});
var imageForm = obj.parents(".imageform");
var preview_img = imageForm.next(".preview_img");
var btn = imageForm.find(".up_btn");
<br>
imageForm.ajaxForm({ <br>
目标：preview_img，<br>
提交之前：函数（）{<br>
imageForm.next("div.preview_img").html(""); <br>
Preview_img.hide(); <br>
btn.隐藏(); <br>
}, <br>
成功：函数（）{<br>
预览_img.show(); <br>
btn.show();
},
错误：函数（）{
btn.show();
Preview_img.hide();
}
}）。提交（）;
});通过JS绑定change事件来提交单张图片上传表单$("body").on("change", ".photoimg",
函数（）{
var obj = $(this);
var imageForm = obj.parents(".imageform");
var preview_img = imageForm.next(".preview_img");
var btn = imageForm.find(".up_btn");
imageForm.ajaxForm({
目标：preview_img，
提交之前：函数（）{
imageForm.next("div.preview_img").html("");
Preview_img.hide();
btn.隐藏();
},
成功：函数（）{
Preview_img.show();
btn.show();
},
错误：函数（）{
btn.show();
Preview_img.hide();
}
}）。提交（）;
});PHP后台处理上传图片if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
如果（空（$名称））{
echo ‘请选择要上传的图片’;
出口;
}
$ext = 扩展($name);
if (!in_array($ext, $extArr)) { echo '图片格式错误！';
exit;
}
if ($size > (1000 * 1024)) {
echo '图片大小不能超过1M';
exit;
}
$image_name = time() . rand(100, 999) . "." . $ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if (move_uploaded_file($tmp, $path . $image_name)) {
echo '';
} else {
echo '上传出错了！';
}
exit;
}PHP仿淘宝上传演示教程地址：http://www.sucaihuo.com/js/513.html
PHP jQuery Ajax仿淘宝多上传按钮单文件上传.rar
( 27.98 KB 下载：144 次 )
AD：真正免费，域名 虚机 企业邮箱=0元