圖片上傳並回顯Ajax異步篇
圖片如何無刷新的上傳到服務器呢?繼前兩篇文章后，我們來實戰一下如何無刷新的異步上傳圖片，我們還是先看一下效果
在實戰前呢，我們需要做些准備工作。比如說，了解一下FormData對象
“FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。如果表單enctype屬性設為multipart/form-data ，則會使用表單的submit()用來提交表單，這個方法和提交表單按鈕很類似。")方法來發送數據，從而，發送數據具有同樣形式。”
這是官方的講解，我來說一下我的理解，我們new 一個FormData( $(form) )對象時，它會幫我們把form表單里的數據封裝成鍵值對的形式，以前我們都時用input的submit進行提交數據，當我們拿到這個form對象的時候，我們就可以用ajax模擬input的submit提交，既然知道了這些，我們就開始一步步的編程吧。
我們先完善一下界面，看一下下面的代碼
這是body里的內容，不要忘了form，只是沒有了action，enctype屬性也要設置好，我的上一篇文章有對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里的內容
<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>
基本的樣式都已經編寫完成，我們來參觀一下吧
好了，我們開始編寫我們的jquery代碼吧，在編寫之前我們理一下思路，當用戶選擇好圖片時，即input 的change事件觸發時，我們就把圖片上傳到服務器，服務端返回圖片的url，我們拿到這個url時，把它設置為我們input外面盒子的背景圖。既然知道了思路我們就編寫一下代碼吧
<script>
$(document).ready(function(){
$("#file1").on("change", upload );
})
function upload(){
/**
* 我們存一下this對象，
* 我們將在ajax的回調函數中，
* 將要用這個對象，
* 用它來改變父盒子的背景圖
*
*/
var self = this;
//如果不理解我寫的，可以看看我的前幾篇文章
$.ajax({
url: "/UpImg/upload",
type: "post",
dataType: "json",
cache: false,
data: new FormData($("#formTag1")[0]),
processData: false,// 不處理數據
contentType: false, // 不設置內容類型
success: function(data){
/*
后端返回的數據格式為
{"url": "xxxxxx"}
*/
$(self).parent().css({
"background-image": "url("+data.url+")"
})
}
})
}
</script>
我們把change事件的執行函數獨立出來，因為我們可能還需要用到這個函數。函數也沒有什么難點，就是保存一個this對象，加一個ajax。我們來看一下效果圖
我們已經實現了change事件觸發時，我們把圖片上傳到服務器，我們也可以改變我們已經選擇好的圖片，到這里肯定還沒有結束。因為用戶只是選擇了一張圖片，如果我們的業務需要用戶上傳多張圖片呢，那我們這個肯定就不滿足要求了，我們需要再給我們的代碼添加一些功能。比如說，當用戶選擇好一張后，再生成一個form->input標簽，然后就這樣遞歸；但我們還需要加一些條件，就是當用戶改變已經選擇好的圖片時，我們不能生成form->input標簽。好了需求大概就是這樣的。
我們來理一下思路：
1、我們需要給form標簽外面添加一個盒子，我們把所有生成的form標簽都放里面。
2、我們需要有一個計數器，記錄form的個數，也是通過這個我們可以給form和input設置不同的id
3、我們需要判斷當前change事件是第幾個，如果它的id中的數值部分和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>
我們來編碼實現一下js
<script>
//作為第幾個form的標志
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,"");
//構造form的選擇器
var $form = "#formTag" +num;
$.ajax({
url:"/UpImg/upload",
type:"post",
dataType:"json",
cache:false,
data: new FormData($($form)[0]),
processData: false,// 不處理數據
contentType: false, // 不設置內容類型
success:function(data){
//設置背景為我們選擇的圖片
$(self).parent().css({
"background-image": "url("+data.url+")"
});
//我們再生成一個form
if(count == num ){
//count計數加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));
//構造input的選擇器
var $sel = "#file"+count;
//為新生成的input綁定change事件
$($sel).on("change", upload );
}else{
//如果不等於
return false;
}
}
});
}
</script>
這樣的話我們基本就實現了我們的效果，就如開頭中的效果，這個是可以無限添加form的，到時候可以給count設置一個上界，根據自己的業務來調整吧，到此我們的圖片上傳並回顯系列就算完結了;
聽說520快到了，我們是不是需要new一個會說話的對象呢，520的時候我們就來實戰new一個對象吧，也是作為一個禮物送給大家呢(手動滑稽)
圖片上傳並回顯系列
如何用input標簽上傳多個圖片並回顯
圖片上傳並回顯后端篇