[英]uploading multiple images using the same button
我想知道是否有可能使用相同的輸入上傳多個圖像。 我在上傳圖片時遇到問題,我只能上傳一個並顯示它。 並且也有可能使背景透明
// set up variables var reader = new FileReader(), i=0, numFiles = 0, imageFiles; // use the FileReader to read image i function readFile() { reader.readAsDataURL(imageFiles[i]) } // define function to be run when the File // reader has finished reading the file reader.onloadend = function(e) { // make an image and append it to the div var image = $('<img>').attr('src', e.target.result); $(image).appendTo('#images'); // if there are more files run the file reader again if (i < numFiles) { i++; readFile(); } }; $('#go').click(function() { imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; readFile(); });
<input type="file" multiple="true" id="files" /> <button id="go" data-bind="click: addNew">Create</button> <div id="images"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
您可以使用FileList
對象的.item()
方法將索引i
處的File
對象傳遞給readFile()
; 每次單擊#go
將i
設置為0
// set up variables var reader = new FileReader(), i = 0, numFiles = 0, imageFiles; // use the FileReader to read image i // pass `File` at index `i` within `FileList` to `readFile` function readFile(file) { reader.readAsDataURL(file) } // define function to be run when the File // reader has finished reading the file reader.onloadend = function(e) { // increment `i` ++i; // make an image and append it to the div var image = $('<img>').attr('src', e.target.result); $(image).appendTo('#images'); // if there are more files run the file reader again if (i < numFiles) { // pass `File` at index `i` within `FileList` to `readFile` readFile(imageFiles.item(i)); } }; $('#go').click(function() { i = 0; imageFiles = document.getElementById('files').files // get the number of files numFiles = imageFiles.length; // pass first `File` to `readFile` readFile(imageFiles.item(i)); });
<input type="file" multiple="true" id="files" /> <button id="go" data-bind="click: addNew">Create</button> <div id="images"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="http://circletype.labwire.ca/js/circletype.js"></script> <script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
要啟用多個選擇,請為文件輸入一個名稱,然后將該名稱設置為數組name="files[]"
嘗試:
<input name="files[]" type="file" multiple id="files" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.