上篇回顧：自己寫的圖片上傳_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" οnclick="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" οnclick="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)
