圖片上傳，預覽以及圖片刪除

背景

前兩天在作一個PC網站的意見反饋，其中涉及到了圖片上傳功能，要求能夠上傳多張圖片，而且支持圖片上傳預覽及圖片刪除， 圖片上傳這一塊之前沒怎麼搞過，並且通常也不多會碰到這樣的需求，因此在作這個功能的時候，參考了不少網上的代碼 ， 如今就單獨寫一篇博客來記錄下實現的整個過程，以及在作的過程當中遇到的一些坑。

先來看下實現的最後效果：

首先先建立好一個用於展現預覽圖片及上傳按鈕的div，content-img-list用於動態展現預覽圖片，file用於顯示上傳按鈕

<div class="content-img">
        	<ul class="content-img-list">
        		<!-- <li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li> -->
        	</ul>
        	<div class="file">
        		<i class="ico-plus"></i>上傳圖片，支持jpg/png<input type="file" name="file" accept="image/*" id="upload" >
        	</div>	
        </div>
複製代碼

上傳按鈕美化

默認input type=file的上傳按鈕很是的醜陋，實現自定義上傳按鈕樣式，這裏主要經過設置input的透明度將它設置爲opacity: 0;

圖片上傳實現步驟

圖片上傳

經過jquery監聽input change事件，這樣咱們能夠獲取到上傳的圖片流信息，從而能夠獲取到圖片的地址、大小、格式以及名稱等信息

這裏建立3個數組，imgName、imgSrc、imgFile分別用於存放上傳圖片的名稱、url地址以及圖片流信息

var fileList = this.files;
		for(var i = 0; i < fileList.length; i++) {
			var imgSrcI = getObjectURL(fileList[i]);
			imgName.push(fileList[i].name);
			imgSrc.push(imgSrcI);
			imgFile.push(fileList[i]);
		}
複製代碼

getObjectURL方法是一個用於獲取本地圖片的地址，使用該url能夠顯示圖片

function getObjectURL(file) {
	var url = null ;
	if (window.createObjectURL!=undefined) { // basic
		url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}
複製代碼

控制上傳圖片大小、格式以及上傳數量

$('#upload').on('change',function(){		
		  if(imgSrc.length==4){
			return alert("最多隻能上傳4張圖片");
		}
		var imgSize = this.files[0].size;  //b
		if(imgSize>1024*1024*1){//1M
			return alert("上傳圖片不能超過1M");
		}
		if(this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif'){
			return alert("圖片上傳格式不正確");
		}
	})
複製代碼

圖片預覽

建立一個addNewContent方法用於動態展現添加的圖片實現圖片預覽，在每次上傳圖片的時候調用該方法

function addNewContent(obj) {
	$(obj).html("");
	for(var a = 0; a < imgSrc.length; a++) {
		var oldBox = $(obj).html();
		$(obj).html(oldBox + '<li class="content-img-list-item"><img src="'+imgSrc[a]+'" alt=""><a index="'+a+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>');
	}
}
複製代碼

圖片刪除

1.經過監聽鼠標的mouseover事件，顯示圖片刪除按鈕

$('.content-img-list').on('mouseover','.content-img-list-item',function(){
		$(this).children('a').removeClass('hide');
	});
複製代碼

2.監聽鼠標的mouseleave事件，隱藏圖片刪除按鈕

$('.content-img-list').on('mouseleave','.content-img-list-item',function(){
		$(this).children('a').addClass('hide');
	});
複製代碼

3.獲取圖片index下標屬性，經過js的splice方法刪除數組元素，從新調用addNewContent方法遍歷圖片數組顯示預覽圖片

$(".content-img-list").on("click",'.content-img-list-item a',function(){
	    	var index = $(this).attr("index");
			imgSrc.splice(index, 1);
			imgFile.splice(index, 1);
			imgName.splice(index, 1);
			var boxId = ".content-img-list";
			addNewContent(boxId);
			if(imgSrc.length<4){//顯示上傳按鈕
				$('.content-img .file').show();
			}
	  });
複製代碼

圖片上傳提交

這裏主要使用FormData來拼裝好數據參數，提交到後臺

var formFile = new FormData();
複製代碼

遍歷imgFile圖片流數組拼裝到FormData中

$.each(imgFile, function(i, file){
            formFile.append('myFile[]', file);
        });
複製代碼

添加其餘參數

formFile.append("type", type); 
        formFile.append("content", content); 
        formFile.append("mobile", mobile); 
複製代碼

最後使用ajax提交內容

$.ajax({
            url: 'http://zhangykwww.yind123.com/webapi/feedback',
            type: 'POST',
            data: formFile,
            async: true,  
            cache: false,  
            contentType: false, 
            processData: false, 
            // traditional:true,
            dataType:'json',
            success: function(res) {
                console.log(res);
            }
        })
複製代碼

以上就實現了圖片上傳、圖片預覽和圖片刪除的功能

實現過程當中遇到的坑

1.解決input file上傳圖片沒法上傳相同的圖片 若是是相同圖片onChange事件只會觸發一次 onChange裏面清除元素的value

document.querySelector('#uploader-get-file').value = null
複製代碼

也能夠這樣this.value = null;

$('#upload').on('change',function(){//圖片上傳
        this.value = null;//解決沒法上傳相同圖片的問題
})
複製代碼

2.使用formData上傳file數組 3種方式（參考https://segmentfault.com/q/1010000009622562）

方式1：
$.each(getImgFiles(), function(i, file){
    formData.append('files', file);
});
方式2：
$.each(getImgFiles(), function(i, file){
    formData.append('files[]', file);
});
方式3：
$.each(getImgFiles(), function(i, file){
    formData.append('files_' + i, file);
});
複製代碼

3.jquery設置 ajax屬性

processData : false, // 告訴jQuery不要去處理髮送的數據
contentType : false,// 告訴jQuery不要去設置Content-Type請求頭
複製代碼

戳我在線查看demo

完整的代碼我已經上傳到了github.com/fozero/fron…，能夠點擊查看，若是以爲還不錯的話，記得star一下哦！

做者：fozero 聲明：原創文章，轉載請註明出處，謝謝！www.cnblogs.com/fozero/p/88… 標籤：input,file,圖片上傳