從沒有服務器的文件輸入中檢索圖像數據

對於上下文，我試圖創建一個「點擊圖像」文件上傳。最初有一個默認圖像，然後我點擊。我觸發文件上傳，用戶選擇他們想要的圖像文件。然後，我將設置圖像來替換默認值（以後再用它來做其他事情）。現在，前端看起來像這樣：從沒有服務器的文件輸入中檢索圖像數據

<div class="right-preview"> 
    <input type="image" src="img/logo.png" height="240px" width="240px" ng-click="uploadImage('right-image')" id="upload-right-image"/> 
    <input type="file" id="upload-right" style="visibility: hidden"> 
</div>

當圖像被點擊時，它會觸發一個上傳動作。

$scope.uploadImage = function(side) { 
    $image = $('#upload-' + side); 
    $fileInput = $('#upload-right'); 

    $fileInput.change(function(changeEvent) { 
    var files = changeEvent.target.files; 

    for(var i = 0; i < files.length; i++) { 
     file = files[i]; 
      console.log(file); 
     } 
    }); 

    $fileInput.trigger('click'); 
}

當用戶完成拾取文件後觸發更改事件時，我有changeEvent並且我知道他們已經選擇了他們的文件。每個文件都有一些屬性（如名稱和大小），但我沒有看到訪問原始數據的任何內容，所以我可以在我的其他元素上設置src。

我是否完全缺少如何獲取圖像數據，還是有更好的方法來做到這一點？我沒有服務器（現在）發佈到此。也許有更好的方法來解決這個問題？

來源

2016-02-08 Cap' n Jack

什麼你正在嘗試做的沒有一個服務器端語言處理上傳是不可能的。您將需要一臺服務器來提供靜態文件。 –

看看[這個]（http://stackoverflow.com/questions/18754943/preview-image-before-uploading-angularjs），也許你想要做什麼 – Vanojx1

這是可能的只是改變圖像'src'，但可能這不是一個上傳。 –

此鏈接可能會對你有所幫助 - https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

我花了一個方法，從該網頁並增加了部分附加功能，隱藏文件的上傳按鈕，具有圖像佔位符觸發其click事件。

$('#placeholder').click(function() { 
 
    $('#img-upload').trigger('click'); 
 
}); 
 

 
function previewFile() { 
 
    var preview = document.querySelector('img'); 
 
    var file = document.querySelector('input[type=file]').files[0]; 
 
    var reader = new FileReader(); 
 

 
    reader.addEventListener("load", function() { 
 
    preview.src = reader.result; 
 
    }, false); 
 

 
    if (file) { 
 
    reader.readAsDataURL(file); 
 
    } 
 
}

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<img width="250" height="250" id="placeholder" src="http://placehold.it/250x250&text='click to upload'"> 
 
<input class="hidden" type="file" onchange="previewFile()" id="img-upload">

來源

2016-02-08 18:33:19 ThisClark

從沒有服務器的文件輸入中檢索圖像數據

回答

相關問題