額 呆坐許久 感受 有不少想寫的 就是不知從何寫起。。賊尷尬。 php
其實 我平時項目中 基本上傳圖片什麼的 都是跟着from 表單 一塊兒提交給後臺的 html
實行起來 簡單暴力 jquery
連圖片預覽的都沒有寫 程序員
其實 實行圖片的預覽功能 很是簡單的 好比 代碼以下ajax
html 代碼後端
<from > <input type='file' name='pic' id='pic' multiple="multiple" > <img src='' class='img' id='img' alt='圖片的預覽'> </fron>
js 代碼數組
須要先加載 jquery.js 哈 否則 會報錯的 瀏覽器
//js 預覽 方法一 // 這個是 在對象發生改變時觸發 也就是對應的咱們 選擇完成圖片後 會觸發 $("#pic").change(function(){ // 獲取圖片對象數組 var file=$("#pic")[0].files[0]; //將圖片生成blob額 這兒我也不知道叫什麼 能夠生成一個 本地的臨時預覽圖片的字符串 //暫且叫他 blob對象吧 有知道叫什麼的大佬 記得留言告訴我哈 免得改天出門丟人了 var blob= window.URL.createObjectURL(file); $("#img").attr('src',blob);//將blob字符串 賦予給 img標籤 便可完成圖片的預覽 }) //js 預覽 方法二 將file對象 轉成 dataURL 進行預覽 $("#pic").change(function(){ // 獲取圖片對象數組 var file=$("#pic")[0].files[0]; //建立一個。。好吧 我也不知道這個是叫什麼對象 var fr=new FileReader(); fr.readAsDataURL(file);//傳入圖片對象 將其轉成base64字符串 //這個 onload是指的加載完畢的意思 在加載完畢後 將 轉好的字符串給賦值給img標籤 fr.onload=function(){ $("#img").attr('src',this.result);//賦值 進行預覽 } })
上面倆種方式 我更喜歡 blob 一些 服務器
blob 生成的預覽地址 短 只能客戶端 本地瀏覽 退出瀏覽器時 就會失效 (恩 好像是這樣的)app
dataURL 生成的字符串比較長 可是 能夠遠程訪問 或者 直接將這個字符串 發送給後臺 返回 進行 base64解碼 便可轉回二進制 也就是圖片數據 而後寫出圖片
圖片的預覽就說到這裏了 不過 單單只是圖片預覽 那怎麼能行 固然還得用js進行提交
相對於 直接from的表單提交 js提交 有它很是顯著的優點
一、 頁面無需刷新 便可完成提交上傳 返回上傳狀態 給用戶良好的體驗效果
二、服務器不給力 或者 上傳的圖片過大時 會有較長的 等待時間 用js的話 能夠作彈出loading 加載層 避免用戶重複點擊 重複的上傳 也是很是利於用戶體驗度
三、能夠作循環單張上傳 實時的告訴用戶 上傳了幾張 還有幾張待上傳
反正就是用戶體驗度大大增強了
ajax 提交上傳圖片demo
HTML代碼
<from > <input type='file' name='pic' id='pic' multiple="multiple" > <input type="button" value='提交上傳' onclick='sub()'> </fron>
JS代碼
function sub(){ //建立一個。。額 參數對象吧 原諒我野路子出身 能夠用來添加一些 表單參數的 var fromObj=new FormData(); //獲取圖片對象 var files=$("#pic")[0].files; //將圖片對象 添加進待上傳參數中 fromObj.append('pic',files); //jquery 的ajax方法 也是咱們經常使用的 先後臺交互工具 $.ajax({ url:'http://localhost/demo/farmer/app-main-pic',//上傳的路徑 type:'POST', data:fromObj,//上傳的方式 contentType:false,//若是是傳圖片則這倆項須要爲false processData:false,//若是是傳圖片則這倆項須要爲false success:function(e){ console.log(e);//打印頁面返回的內容 } }) }
後端代碼的話 就跟咱們日常 接收表單上傳的圖片同樣
好比 php的話 就是
<?php //就能夠查看 咱們上傳的圖片信息了 var_dump($_FILES); ?>
如今 咱們就知道了 怎麼js預覽上傳的圖片 以及 用js進行上傳圖片了 可是僅僅這樣 依然是達不到咱們的理想效果
咱們可能還會須要 對預覽中的圖片 進行 刪除操做 圖片傳多了 不想上傳某張圖片了
繼續往下看代碼吧 天太冷了 代碼沒怎麼整理 僅作了點基礎實現 樣式優化的話 還得小夥伴們本身努力下哈
HTML代碼
<from > <input type='file' name='pic' id='pic' multiple="multiple" > <input type="button" value='提交上傳' onclick='sub()'> </fron> <div id='show'> <!-- 由於有多張圖片 因此不適合寫死一個img標籤了 這兒用來存放img --> </div> <!-- 這個用來 存img的樣式的 沒有用js去拼接字符串 直接寫好樣式後 用js進行 關鍵字替換 這樣 之後修改樣式也會畢竟方便 --> <div style='display: none' id='jsText'> <img src='{{url}}' class='img' title='{{title}}' id='img' onclick='del(this)' data-name='{{name}}' alt='圖片的預覽'> </div>
JS代碼
//建立一個 存放上傳的圖片數據的對象 由於 file標籤裏面 第二次選擇的圖片 會覆蓋掉 第一次的圖片 因此 這個是有必要的 var ajax_files={}; /*預覽圖片*/ $("#pic").change(function(){ //js 獲取圖片對象 var files=$("#pic")[0].files; //獲取咱們寫好的img模板 var text=$('#jsText').html(); //循環選中的圖片 for(var i=0;i<files.length;i++){ //檢查是否已經選擇過該圖片 if(!ajax_files.hasOwnProperty(files[i].name)){ //建立blob對象字符串 var blob= window.URL.createObjectURL(files[i]); //替換img模板裏面的關鍵字 其實和js的字符串拼接img代碼 是一個意思 var str=reload(text,{url:blob,title:files[i].name+' 【單擊刪除】',name:files[i].name}); //將拼接好的img 放入用於顯示的div裏面 $('#show').append(str); //並將改圖片數據 保存到全局的圖片對象內 ajax_files[files[i].name]=files[i]; } } }) /*刪除*/ function del(obj){ //刪除圖片自己 $(obj).remove(); var name=$(obj).attr('data-name'); //在全局圖片對象中刪除當前圖片 delete ajax_files[name]; } /*js上傳*/ function sub(){ //建立參數對象 var fromObj=new FormData(); console.log("如下爲待上傳圖片"); for(var i in ajax_files){ //在控制檯打印待上傳的圖片數據 console.log(ajax_files[i].name,ajax_files[i].type,ajax_files[i].size); //將圖片添加至待上傳對象中 fromObj.append('avatar[]',ajax_files[i]); } $.ajax({ url:'http://localhost/demo/farmer/app-main-pic', type:'POST', data:fromObj, contentType:false,//若是是傳圖片則這倆項須要爲false processData:false, success:function(e){ // console.log(e); } }) } /*字符串替換*/ function reload(text,data){ for(var key in data){ var reg = new RegExp('({{'+key+'}})','g'); text=text.replace(reg,data[key]); } return text; }
無比醜陋的ui界面 一開始選擇了4漲圖片 不過 有刪除了一張 再進行的上傳
以上就是本篇文章的所有代碼了 首先感謝 小夥伴們耐心的看完了本文章 但願能對你有所幫助
代碼有什麼錯誤 或者 不理解的地方 能夠直接聯繫我哈 能解決的 會盡可能幫忙解決哈
那麼。。。晚安了各位!!
------------------------該文章來自一隻賊蠢賊蠢的程序員