基於H5的圖片上傳解析

阿新 • • 發佈：2019-01-14

程式碼實現和解析
一、關於<input type="file" name="" id="file"/>
其files屬性記錄了你放入其中的檔案，所以你可以此處可以通過

img=document.getElementById("file").files[0]

的方式獲取你的上傳的圖片例項，但是也需要你注意，如果使用jquery的$(“#file”)是無法獲取到你files的屬性。

二、關於FileReader()物件
FileReader()是H5支援的瀏覽器快取檔案的物件，所以你上傳(未提交到伺服器)的檔案全部會快取在瀏覽器中，可以通過這個物件獲取。
1、新建一個例項 var reader=new FileReader();

2、將相關的檔案傳給其reader.readAsDataURL(img);

3、當檔案全部載入到瀏覽器記憶體後的回撥函式。reader.onload=function(){ ... ...}

4、將你的檔案的源傳給img.但是要注意的是你的如果先前以及建立好了img是無法改變其src的屬性的所以你必須要去動態的建立img然後再通過append(）的方式去放入到相關的div中去。
eg:$("#img1").append("<img src="+reader.result+" />");

完整的例項如下參考:

<!DOCTYPE html>
<html 
>
<head>
<title>HTML5上傳圖片預覽</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="file" name="" id="file"/>
<div  id="img1"  style 
="width: 100px;height: 100px;"></div>
<script type="text/javascript">

    $("#file").change(function(){

        img=document.getElementById("file").files[0]

        var reader=new FileReader();
        reader.readAsDataURL(img);

        reader.onload=function(e){

            $("#img1").append("<img src="+reader.result+" />");

        }
    })
</script>
</body>
</html>

基於H5的圖片上傳解析

基於H5的圖片上傳解析

基於SpringMvc圖片上傳

h5圖片上傳簡易版（FileReader+FormData+ajax）

H5 圖片上傳

Android WebView 支援H5圖片上傳

H5圖片上傳外掛

Vue2.0圖片上傳及圖片壓縮自定義H5圖片上傳元件

WebView基於H5的上傳和和下載

h5圖片上傳

基於VUE選擇上傳圖片並在頁面顯示（圖片可刪除）

h5 canvas 圖片上傳操作

【轉載】【JAVA秒會技術之圖片上傳】基於Nginx及FastDFS，完成圖片的上傳及展示

微信小程序基於騰訊雲對象存儲的圖片上傳

基於Vue + Node.js + MongoDB的圖片上傳組件，實現圖片的預覽和刪除

前端H5實現多圖片上傳並預覽

基於Spring Boot實現圖片上傳/加水印一把梭操作

Java伺服器部署基於OpenCV的C++影象處理專案（三）圖片上傳並返回處理圖

基於spring 的ssi-uploader的多圖片上傳

基於WebUploader的圖片上傳

基於vue的移動端圖片上傳

基於H5的圖片上傳解析

相關推薦