首先看看 "效果圖" ：
我們最終實現的就是點擊右側的“相機”按鈕添加想要添加的圖片然后可以根據需要刪除（點叉刪除本條）或再次添加圖片，並顯示縮略圖。。。。走起。。。。
首先來一段筆（fei）記（hua）:
看着文字理解下面的代碼就好多了。。。
1.當input的屬性type為file時，此時可以選擇文件。
2.在通過文件輸入字段選擇了一或多個文件時， files集合中將包含一組 File 對象，每個 File 對象對應着一個文件。每個 File 對象都有下列只讀屬性。
name ：本地文件系統中的文件名。
size ：文件的字節大小。
type ：字符串，文件的 MIME 類型。
lastModifiedDate ：字符串，文件上一次被修改的時間（只有 Chrome 實現了這個屬性）
4.capture表示，可以捕獲到系統默認的設備，
比如：camera--照相機；camcorder--攝像機；microphone--錄音。
accept表示，直接打開系統文件目錄。
5.其實html5的input:file標簽還支持一個multiple屬性，表示可以支持多選
6.window.URL.createObjectURL()和 window.URL.revokeObjectURL()兩個DOM方法。這兩個方法創建簡單的URL字符串對象，用於指向任何 DOM File 對象數據，包括用戶電腦中的本地文件。
7.URL對象是 File 對象的一個字符串標識。 每次調用window.URL.createObjectURL()的時候，會創建一個唯一的URL對象，即使你已經為該文件創建了URL對象。這些對象都必須被釋放。 當文檔被卸載時，它們會自動釋放，如果你的頁面動態地使用它們，你應該明確地通過調用window.URL.revokeObjectURL()釋放它們
代(da)碼(jia)如(dou)下(hui)：
<input type="file" id="fileAPI" value=""/><!--只能選擇一個文件--> <input type="file" id="fileAPI1" multiple value=""/><!--可以選擇多個文件--> <input type="file" accept="image/*" capture="camera"><!--照相機！注：pc端點擊有延遲！--> <input type="file" accept="video/*" capture="camcorder"><!--攝像機！注：pc端點擊有延遲！--> <input type="file" accept="audio/*" capture="microphone"><!--錄音！注：pc端點擊有延遲！-->
<script type="text/javascript"> $('#fileAPI1').change(function(){ console.log($('#fileAPI1')[0].files);/*打印選擇的文件*/ console.log($('#fileAPI1')[0].files.length)/*打印選擇文件個數*/ }) </script>
然后是我點擊的是“相機”的按鈕，實際上觸發的是input的click事件，所以當我們不想用戶看到文件路徑和難看的上傳按鈕時我們可以這么做( 用其他按鈕的事件觸發隱藏的文件輸入框的click方法)：
/**
* 點擊相機按鈕觸發input的click事件
* @returns
*/
(function addImgA() {
$('#addImg_aInput').on('touchstart',function(e){
e.preventDefault();
$('#addImg_input').click();
});
})();
其實此時input的css是這樣子滴（如下圖）：
我們顯示圖片縮略圖主要是通過圖片的URL顯示的（上代碼）：
html代碼片段：
<div class='commodityDescription_textarea_div'> <textarea rows="" cols="" placeholder='寫下你的商品評價對別人很有幫助哦！'></textarea> </div> <div class='commodityDescription_img_div'> <a href='javascript:;' id='addImg_aInput'><img class='img1' src='../img/paizhao.png' /></a> <input type="file" accept="image/*" multiple id='addImg_input'> </div>
js代碼如下：
/**
* 通過用戶選擇的圖片文件url 顯示縮略圖
*/
(function() {
var $imgListWrapper = $('.commodityDescription_img_div');
var $ulImgList = $('<ul></ul>');
var $addImgInput = $('#addImg_input');
$ulImgList.appendTo($imgListWrapper);
$ulImgList.attr('id','ulImgList');
$('#ulImgList').css({
'display':'inline-block',
'width':'80%',
'height':'100%',
'float':'right'
});
$addImgInput.on('change',function(){
var files = $addImgInput[0].files;
for(var i=0 ; i<files.length ; i++){
var $ulImgListLi = $('<li></li>');
var $img = $('<img />');
var $span = $('<span>x</span>')
var imgUrl = window.URL.createObjectURL(files[i]);
$ulImgListLi.appendTo($ulImgList);
$img.appendTo($ulImgListLi);
$img.attr('src',imgUrl);
$('#ulImgList>li>img').css({
'max-width':'100%',
'display':'inline-block',
'max-height':'90%',
'box-sizing':'border-box',
'vertical-align': 'middle'
});
$('#ulImgList>li').css({
'margin':'2px 2px',
'text-align': 'center',
'position':'relative',
'border':'1px solid #d6d6d6',
'display':'inline-block',
'line-height':'3.125rem',
'vertical-align':'top',
'width':'25%',
'height':'3.125rem',
'box-sizing':'border-box'
});
$span.appendTo($ulImgListLi).css({
'color':'#fff',
'line-height':'1rem',
'border-radius':' 50%',
'top': '-0.5rem',
'position': 'absolute',
'right': '-.2rem',
'background': '#c81e32',
'height': '1rem',
'width': '1rem',
'text-align':' center'
});
//span 點擊事件 刪除當期圖片 防止誤觸
$ulImgListLi.find('span').on('touchstart',function(){
this.flag = true;
});
$ulImgListLi.find('span').on('touchmove',function(){
this.flag = false;
});
$ulImgListLi.find('span').on('touchend',function(){
if(this.flag){
$(this).parent('li').remove();
}
});
}
});
})();
js代碼大致：1.選擇文件后觸發change事件 2.得到已選擇文件的url 3.遍歷賦值給我們的img 4.我們動態的創建相應元素設置相應樣式 5.完成；
主要就這些吧，有部分css沒有寫出來都是些簡單的，本人小白一枚，第一次發文，不喜勿噴，還望大家多多幫助相互學習，下面是參考鏈接，人家寫的很好呢。。。
（我就是看這個鏈接自己寫的，也希望大家能學到東西。。886.。。）
參考鏈接：https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications