上篇回顾:自己写的图片上传_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 = "none";
//将表单加当document上,
document.body.appendChild(myform); //创建表单后一定要加上这句否则得到的form不能上传。document后要加上body,否则火狐下不行。
var form = $(myform);
var fu = imgupfile.clone(true).val(""); //先备份自身,用于提交成功后,再次附加到span中。
var fu1 = imgupfile.appendTo(form); //然后将自身加到form中。此时form中已经有了file元素。
//将上传等待图标附加到span此时,span中只用这个等待的图片(上传控件self不在了)。
span.html("<img src=\"/Content/images/loading.gif\" /> 正在上传.. ");
//开始模拟提交表当。
form.ajaxSubmit({
success: function (data) {
if (data == "NoFile" || data == "Error" || data == "格式不正确!") {
alert(data);
}
else {
//文件上传成功,返回图片的路径。将路经赋给隐藏域
ImageHideFile.val(data);
//如果上传成功,则移走现有的图片(实际上在服务其已经不存在了),然后再把新上传的图片加到div上。
if (imgDiv.find("img").eq(0)) { imgDiv.find("img").eq(0).remove(); }
var img = document.createElement("img");
img.title = "双击图片可删除图片";
img.height = "100";
var myimg = $(img);
imgDiv.append(myimg); //要先append再给img赋值,否则在ie下不能缩小宽度。
myimg.attr("src", data); //给img赋值。
//给img绑定双击删除事件。
myimg.bind("dblclick",
function () {
if (ImageHideFile.val() == "") {
return;
}
//alert(ImageHideFile.val());
var url = "/Public/Delete/" + "?id=" + ImageHideFile.val() + "&ra=" + Math.random();
$.get(url, function (data) {
alert(data);
if (data == "Success") {
ImageHideFile.val("");
myimg.remove();
}
});
});
}
span.html(fu);
form.remove();
}
});
}
//初始页面,若ImageHideFile有值,则将图片显示出来。
//如果刷新页面图片不在了,但是隐藏域中有图片的地址,则将图片显示出来。
//可惜在ie下用js可以向隐藏域中添加值,但是只要刷新页面,
//隐藏域中的值就不再了,只能保存从后台赋的值。
//但是在火狐是可以的,所以在火狐下,只要你上传了图片,不管你怎么刷新图片不不会消失。
function initImg() {
var list = $(document).find(".fileimgdiv");
list.each(function () {
//准备显示的图片
var img = document.createElement("img");
img.title = "双击图片可删除图片";
img.height = "100";
var ImageHideFile = $(this).parent().find("input:hidden").eq(0); //图片隐藏域。
var imgDiv = $(this); //.parent().find(".fileimgdiv").eq(0); //用户显示图片的div
if (imgDiv.find("img")) { imgDiv.find("img").remove(); }
if ($.trim(ImageHideFile.val()) != "" && $(img)) {
imgDiv.append($(img)); //要先append再给img赋值,否则在ie下不能缩小宽度。
$(img).attr("src", ImageHideFile.val()); //给img赋值。
//alert($.trim(ImageHideFile.val()));
$(img).bind("dblclick",
function () {
if (ImageHideFile.val() == "") {
return;
}
var url = "/Public/Delete/" + "?id=" + ImageHideFile.val() + "&ra=" + Math.random();
$.get(url, function (data) {
alert(data);
if (data == "Success") {
ImageHideFile.val("");
$(img).remove();
}
});
});
}
});
}
//这个不多说。
$(document).ready(function () {
initImg();
});
//检查上传的图片格式
function checkImgType(filename) {
var pos = filename.lastIndexOf(".");
var str = filename.substring(pos, filename.length)
var str1 = str.toLowerCase();
if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(str1)) {
return false;
}
return true;
}
页面部分的代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 100%; border: solid 1px #dddddd; float: left; clear: both;" id="256">
<input type="hidden" value="" />
<div class="fileimgdiv" style="clear: both; margin-bottom: 5px;">
@*图片显示在这里*@
</div>
<span>
<input type="file" name="file" />
</span>
<input type="button" value="upload" onclick="javascript:uploadfile(this);" /> <span>图片最适合宽度
390px × 228px。</span>
</div>
<div style="width: 100%; border: solid 1px #dddddd; float: left;" id="123">
<input type="hidden" />
<div class="fileimgdiv" style="clear: both; margin-bottom: 5px;">
</div>
<span>
<input type="file" name="file" />
</span>
<input type="button" value="upload" onclick="javascript:uploadfile(this);" /> <span>图片最适合宽度
390px × 228px。</span>
</div>
<script src="../../Scripts/jquery.fileupload.js" type="text/javascript"></script>
</body>
</html>
此次是在mvc下测试使用的。
引用了两个库文件
1、jquery类库
<script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
2、可用于模拟form提交的jquery.form类库
<script src="../../Scripts/jquery.form.js" type="text/javascript"></script>
在编写js的时候,遇到一个比较郁闷的事情。
//准备显示的图片(不能在这里创建,否者ie图片不能根据height按比例缩小)
//var img = document.createElement("img");
//img.title = "双击图片可删除图片";
//img.height = "100";
本来是想把准备工作在前面做好掉。所以我一开始就把创建图片放在了前面。
一开始测试是好的,但是经过几次的测试发现在在ie下出了问题。什么问题呢?
在ie下,当你连续上传几次图片时,显示的图片就会变得很小,高只有30px,原本是预设100px的,怎么变成了30px呢?但是火狐下却没有出现这样的问题。这个ie真是不给力。到现在还是不明白为什么在ie下他会出现这种情况!
不过后来还是被我找到了解决的方法。
解决方法就是把下面这段代码移到后面
//准备显示的图片(不能在这里创建,否者ie图片不能根据height按比例缩小)
//var img = document.createElement("img");
//img.title = "双击图片可删除图片";
//img.height = "100";
//如果上传成功,则移走现有的图片(实际上在服务其已经不存在了),然后再把新上传的图片加到div上。
if (imgDiv.find("img").eq(0)) { imgDiv.find("img").eq(0).remove(); }
var img = document.createElement("img");
img.title = "双击图片可删除图片";
img.height = "100";
var myimg = $(img);
imgDiv.append(myimg); //要先append再给img赋值,否则在ie下不能缩小宽度。
myimg.attr("src", data); //给img赋值。
在此再说一下我这个上传的思路,此上传为覆盖上传,即如果是第二次上传则先删除第一次上传的图片(服务器上删除,而不是客户删除,当然客户端同时也删除)。
到此结束。
后一篇:图片上传_ajax上传之实际应用(附上Demo)