額 呆坐許久 感覺 有很多想寫的 就是不知從何寫起。。賊尷尬。
其實 我平時項目中 基本上傳圖片什么的 都是跟着from 表單 一起提交給后台的
實行起來 簡單暴力
連圖片預覽的都沒有寫
其實 實行圖片的預覽功能 非常簡單的 比如 代碼如下
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 生成的預覽地址 短 只能客戶端 本地瀏覽 退出瀏覽器時 就會失效 （恩 好像是這樣的）
dataURL 生成的字符串比較長 但是 可以遠程訪問 或者 直接將這個字符串 發送給后台 返回 進行 base64解碼 即可轉回二進制 也就是圖片數據 然后寫出圖片
圖片的預覽就說到這里了 不過 單單只是圖片預覽 那怎么能行 當然還得用js進行提交
相對於 直接from的表單提交 js提交 有它非常顯著的優勢
1、 頁面無需刷新 即可完成提交上傳 返回上傳狀態 給用戶良好的體驗效果
2、服務器不給力 或者 上傳的圖片過大時 會有較長的 等待時間 用js的話 可以做彈出loading 加載層 避免用戶重復點擊 重復的上傳 也是非常利於用戶體驗度
3、可以做循環單張上傳 實時的告訴用戶 上傳了幾張 還有幾張待上傳
反正就是用戶體驗度大大加強了
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漲圖片 不過 有刪除了一張 再進行的上傳
以上就是本篇文章的全部代碼了 首先感謝 小伙伴們耐心的看完了本文章 希望能對你有所幫助
代碼有什么錯誤 或者 不理解的地方 可以直接聯系我哈 能解決的 會盡量幫忙解決哈
那么。。。晚安了各位！！
------------------------該文章來自一只賊蠢賊蠢的程序員