上篇回顾:自己写的图片上传_ajax上传(增强版)。
此次改进:
1、加上了客户端格式验证。
2、将方法提出来了,不再使用id访问,只需根据上传按钮即可上传。
3、因为改成了不用id访问,所以解决了一个页面只能有一个上传的问题。
不多说,还是先来张效果图吧。
js部分的代码:
//上传主程序
function uploadfile(o) {
//alert(o);
//准备显示的图片(不能在这里创建,否者ie图片不能根据height按比例缩小)
//var img = document.createElement("img");
//img.title = "双击图片可删除图片";
//img.height = "100";
var self = $(o);
if (!self) { return; }
//self:上传按钮;
var parentDiv = self.parent(); //整个上传的容器
var imgDiv = parentDiv.find(".fileimgdiv").eq(0); //用于显示图片的div
var imgupfile = parentDiv.find("input:file").eq(0); //上传控件
var span = imgupfile.parent(); //上传按钮的父级。
var ImageHideFile = parentDiv.find("input:hidden").eq(0); //图片隐藏域。
if (imgupfile.val() == "") {
alert("请选择要上传的图片!");
return false;
}
else {
if (!checkImgType(imgupfile.val())) {
alert("格式不正确,只能上传格式为gif|jpeg|jpg|png|bmp!");
return false;
}
}
//如果已有图片,则先把图片删除
if (ImageHideFile.val() != "") {
var url = "/Public/Delete/" + "?id=" + ImageHideFile.val() + "&ra=" + Math.random();
$.get(url, function (data) { ImageHideFile.val(""); imgDiv.find("img").eq(0).remove() });
}
//准备表当
var myform = document.createElement("form");
myform.action = "/Public/Upload";
myform.method = "post";
myform.enctype = "multipart/form-data";
myform.style.display