图片上传_ajax上传之改进版本
上篇回顾：自己写的图片上传_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下出了问题。什么问题呢？
在ie下，当你连续上传几次图片时，显示的图片就会变得很小，高只有30px，原本是预设100px的，怎么变成了30px呢?但是火狐下却没有出现这样的问题。这个ie真是不给力。到现在还是不明白为什么在ie下他会出现这种情况！
不过后来还是被我找到了解决的方法。
解决方法就是把下面这段代码移到后面
在此再说一下我这个上传的思路，此上传为覆盖上传，即如果是第二次上传则先删除第一次上传的图片（服务器上删除，而不是客户删除，当然客户端同时也删除）。
到此结束。
后一篇：图片上传_ajax上传之实际应用(附上Demo)