圖片上傳并回顯Ajax異步篇
圖片如何無刷新的上傳到服務(wù)器呢?繼前兩篇文章后，我們來實戰(zhàn)一下如何無刷新的異步上傳圖片拷呆，我們還是先看一下效果
在實戰(zhàn)前呢闲坎，我們需要做些準備工作。比如說茬斧，了解一下FormData對象
“FormData對象用以將數(shù)據(jù)編譯成鍵值對腰懂，以便用XMLHttpRequest來發(fā)送數(shù)據(jù)。其主要用于發(fā)送表單數(shù)據(jù)项秉，但亦可用于發(fā)送帶鍵數(shù)據(jù)(keyed data)绣溜，而獨立于表單使用。如果表單enctype屬性設(shè)為multipart/form-data 娄蔼，則會使用表單的submit()用來提交表單怖喻，這個方法和提交表單按鈕很類似底哗。")方法來發(fā)送數(shù)據(jù)，從而锚沸，發(fā)送數(shù)據(jù)具有同樣形式艘虎。”
這是官方的講解咒吐，我來說一下我的理解，我們new 一個FormData( $(form) )對象時属划，它會幫我們把form表單里的數(shù)據(jù)封裝成鍵值對的形式恬叹，以前我們都時用input的submit進行提交數(shù)據(jù)，當(dāng)我們拿到這個form對象的時候同眯，我們就可以用ajax模擬input的submit提交绽昼，既然知道了這些，我們就開始一步步的編程吧须蜗。
我們先完善一下界面硅确，看一下下面的代碼
這是body里的內(nèi)容，不要忘了form明肮，只是沒有了action菱农，enctype屬性也要設(shè)置好，我的上一篇文章有對enctype的講解 圖片上傳并回顯后端篇
<body>
<form id="formTag1" enctype="multipart/form-data">
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" id="file1">
</div>
</form>
</body>
這是css里的內(nèi)容
<style>
.uploadImgBtn {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
background: url("img/plus.png") no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.uploadImgBtn .uploadImg {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.pic {
width: 100px;
height: 100px;
}
.pic img {
width: 100%;
height: 100%;
}
</style>
基本的樣式都已經(jīng)編寫完成柿估，我們來參觀一下吧
好了循未，我們開始編寫我們的jquery代碼吧，在編寫之前我們理一下思路秫舌，當(dāng)用戶選擇好圖片時的妖，即input 的change事件觸發(fā)時，我們就把圖片上傳到服務(wù)器足陨，服務(wù)端返回圖片的url嫂粟，我們拿到這個url時，把它設(shè)置為我們input外面盒子的背景圖墨缘。既然知道了思路我們就編寫一下代碼吧
<script>
$(document).ready(function(){
$("#file1").on("change", upload );
})
function upload(){
/**
* 我們存一下this對象星虹，
* 我們將在ajax的回調(diào)函數(shù)中，
* 將要用這個對象镊讼，
* 用它來改變父盒子的背景圖
*
*/
var self = this;
//如果不理解我寫的搁凸，可以看看我的前幾篇文章
$.ajax({
url: "/UpImg/upload",
type: "post",
dataType: "json",
cache: false,
data: new FormData($("#formTag1")[0]),
processData: false,// 不處理數(shù)據(jù)
contentType: false, // 不設(shè)置內(nèi)容類型
success: function(data){
/*
后端返回的數(shù)據(jù)格式為
{"url": "xxxxxx"}
*/
$(self).parent().css({
"background-image": "url("+data.url+")"
})
}
})
}
</script>
我們把change事件的執(zhí)行函數(shù)獨立出來，因為我們可能還需要用到這個函數(shù)狠毯。函數(shù)也沒有什么難點护糖，就是保存一個this對象，加一個ajax嚼松。我們來看一下效果圖
我們已經(jīng)實現(xiàn)了change事件觸發(fā)時嫡良，我們把圖片上傳到服務(wù)器锰扶，我們也可以改變我們已經(jīng)選擇好的圖片，到這里肯定還沒有結(jié)束寝受。因為用戶只是選擇了一張圖片坷牛，如果我們的業(yè)務(wù)需要用戶上傳多張圖片呢，那我們這個肯定就不滿足要求了很澄，我們需要再給我們的代碼添加一些功能京闰。比如說，當(dāng)用戶選擇好一張后甩苛，再生成一個form->input標(biāo)簽蹂楣，然后就這樣遞歸；但我們還需要加一些條件讯蒲，就是當(dāng)用戶改變已經(jīng)選擇好的圖片時痊土，我們不能生成form->input標(biāo)簽。好了需求大概就是這樣的墨林。
我們來理一下思路：
1赁酝、我們需要給form標(biāo)簽外面添加一個盒子，我們把所有生成的form標(biāo)簽都放里面旭等。
2酌呆、我們需要有一個計數(shù)器，記錄form的個數(shù)搔耕，也是通過這個我們可以給form和input設(shè)置不同的id
3肪笋、我們需要判斷當(dāng)前change事件是第幾個，如果它的id中的數(shù)值部分和count一樣度迂，我們就新生成一個form藤乙，否則就返回
我們先看一下我們的html部分
<body>
<div id="formBox">
<form id="formTag1" enctype="multipart/form-data">
<div class="uploadImgBtn" id="uploadImgBtn">
<input class="uploadImg" type="file" name="file" id="file1">
</div>
</form>
</div>
</body>
我們來編碼實現(xiàn)一下js
<script>
//作為第幾個form的標(biāo)志
var count = 1;
$(document).ready(function(){
$("#file1").on("change", upload );
});
function upload(){
var self = this;
//獲得它是第幾個form表單
var num = this.getAttribute("id").replace(/[a-zA-Z]/g,"");
//構(gòu)造form的選擇器
var $form = "#formTag" +num;
$.ajax({
url:"/UpImg/upload",
type:"post",
dataType:"json",
cache:false,
data: new FormData($($form)[0]),
processData: false,// 不處理數(shù)據(jù)
contentType: false, // 不設(shè)置內(nèi)容類型
success:function(data){
//設(shè)置背景為我們選擇的圖片
$(self).parent().css({
"background-image": "url("+data.url+")"
});
//我們再生成一個form
if(count == num ){
//count計數(shù)加1
count +=1;
var str = '<form id="formTag'+count+'" enctype="multipart/form-data">'+
'<div class="uploadImgBtn" id="uploadImgBtn">'+
'<input class="uploadImg" type="file" name="file" id="file'+count+'">'+
'</div>'+
'</form> ';
//向最外面的盒子添加form
$("#formBox").append($(str));
//構(gòu)造input的選擇器
var $sel = "#file"+count;
//為新生成的input綁定change事件
$($sel).on("change", upload );
}else{
//如果不等于
return false;
}
}
});
}
</script>
這樣的話我們基本就實現(xiàn)了我們的效果，就如開頭中的效果惭墓，這個是可以無限添加form的坛梁，到時候可以給count設(shè)置一個上界，根據(jù)自己的業(yè)務(wù)來調(diào)整吧腊凶，到此我們的圖片上傳并回顯系列就算完結(jié)了;
聽說520快到了划咐，我們是不是需要new一個會說話的對象呢，520的時候我們就來實戰(zhàn)new一個對象吧钧萍，也是作為一個禮物送給大家呢(手動滑稽)
圖片上傳并回顯系列
如何用input標(biāo)簽上傳多個圖片并回顯
圖片上傳并回顯后端篇
