js上傳圖片

額    呆坐許久  感受 有不少想寫的  就是不知從何寫起。。賊尷尬。  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漲圖片 不過  有刪除了一張 再進行的上傳

 

以上就是本篇文章的所有代碼了   首先感謝 小夥伴們耐心的看完了本文章  但願能對你有所幫助

代碼有什麼錯誤 或者 不理解的地方 能夠直接聯繫我哈   能解決的 會盡可能幫忙解決哈

 

那麼。。。晚安了各位!!

 

 ------------------------該文章來自一隻賊蠢賊蠢的程序員

相關文章
相關標籤/搜索