国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML5上傳圖片文件(含拖拽、預覽、上傳、美化)

JackJiang / 1048人閱讀

摘要:本文講細分講述圖片上傳預覽等。對象的類數組序列考慮多文件上傳或者從桌面拖動目錄或文件。可將文件分割為字節范圍。

歡迎交換友鏈 Laker"s Blog--進擊的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker

上篇文章講了如何上傳文件。本文講細分講述圖片上傳、預覽等。

關于接口

File API

File - 獨立文件;提供只讀信息,例如名稱、文件大小、mimetype 和對文件句柄的引用。

FileList - File 對象的類數組序列(考慮多文件上傳或者從桌面拖動目錄或文件)。

Blob - 可將文件分割為字節范圍。

FileReader - 讀取File或Blob

URL scheme

檢測瀏覽器是否支持
// 檢測是否支持File API
if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  支持
} else {
  alert("不支持");
}
基本代碼

選取一張圖片,并預覽:
Demo1



.preview_box img { width: 200px; } $("#img_input").on("change", function(e){ var file = e.target.files[0]; //獲取圖片資源 // 只選擇圖片文件 if (!file.type.match("image.*")) { return false; } var reader = new FileReader(); reader.readAsDataURL(file); // 讀取文件 // 渲染文件 reader.onload = function(arg) { var img = ""; $(".preview_box").empty().append(img); } });

上傳到服務器

var form_data = new FormData();
var file_data = $("#img_input").prop("files")[0];

// 把上傳的數據放入form_data
form_data.append("user", "Mike");
form_data.append("img", file_data);

$.ajax({
    type: "POST", // 上傳文件要用POST
    url: "",
    dataType : "json",
    crossDomain: true, // 如果用到跨域,需要后臺開啟CORS
  processData: false,  // 注意:不要 process data
  contentType: false,  // 注意:不設置 contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});
拖拽上傳

三個相關事件:

dragenter

dragover

drop

原生JavaScript:

Demo2

Drop files here
    // 必須阻止dragenter和dragover事件的默認行為,這樣才能觸發 drop 事件 function fileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; // 文件對象 var output = []; // 處理多文件 for (var i = 0, f; f = files[i]; i++) { output.push("
  • ", escape(f.name), " (", f.type || "n/a", ") - ", f.size, " bytes, last modified: ", f.lastModifiedDate.toLocaleDateString(), "
  • "); } // 顯示文件信息 document.getElementById("list").innerHTML = output.join(""); } function dragOver(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = "copy"; } // 監聽器 var dropZone = document.getElementById("drop_zone"); dropZone.addEventListener("dragover", dragOver, false); dropZone.addEventListener("drop", fileSelect, false);

    jQuery:

    其他代碼可以不變,注意監聽事件的時候的,由于jQuery的封裝,數據存放的字段有變,傳參是e.originalEvent而不是e

    $("#drop_zone").on("dragover", function(e){
      e.stopPropagation();
      e.preventDefault();
      handleDragOver(e.originalEvent);
    });
    
    $("#drop_zone").on("drop", function(e){
      e.stopPropagation();
      e.preventDefault();
      handleFileSelect(e.originalEvent);
    });
    美化上傳框 方法一: 在隱藏的文件輸入框上調用click()方法

    隱藏掉默認的的文件輸入框元素,使用自定義的界面來充當打開文件選擇對話框的按鈕。要使用樣式display:none把原本的文件輸入框隱藏掉,然后在需要的時候調用它的click()方法就行了。

    
    選擇文件
    
    var fileSelect = document.getElementById("fileSelect"),
      fileElem = document.getElementById("fileElem");
    
    fileSelect.addEventListener("click", function (e) {
      if (fileElem) {
        fileElem.click();  // jQuery可以使用 trigger()
      }
      e.preventDefault(); // prevent navigation to "#"
    }, false);
    方法二:用label

    隱藏input,把樣式寫到label上,點擊label就是對input進行操作。

    Demo3

    
    
    
    #img_input2 { display: none; } #img_label2 { background-color: #f2d547; border-radius: 5px; display: inline-block; padding: 10px; } #preview_box2 img { width: 200px; }

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79190.html

    相關文章

    • 基于Node的React圖片上傳組件實現

      摘要:常用的設置如下下的請求風格下的請求和不太一樣,在正式的請求發出之前都會先發一個類型為的請求作為試探,只有當該請求通過以后,正式的請求才能發向服務端。所以服務端路由我們還需要處理這樣一個請求注意該請求同樣需要設置跨域。 寫在前面 紅旗不倒,誓把JavaScript進行到底!今天介紹我的開源項目 Royal 里的圖片上傳組件的前后端實現原理(React + Node),花了一些時間,希望對...

      cfanr 評論0 收藏0
    • 從0開始做一個的Vue圖片/ 文件選擇(上傳)組件[基礎向]

      摘要:當拖動的元素或文本選擇離開有效的放置目標時,會觸發此事件。以及對象在拖放交互期間傳輸的數據。 showImg(https://segmentfault.com/img/bVJQgt?w=1318&h=966); 17-3-2更新: 謝謝@mengdu 補充的關于圖片預覽的另一種更簡單方法 URL.createObjectURL(),具體在文章里補充 之前用Vue做了一個基礎的組件vue...

      Paul_King 評論0 收藏0

    發表評論

    0條評論

    JackJiang

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <