動態上傳HTML和Javascript圖片

Question

如何使用HTML和Javascript上傳多個單獨的圖像？ 我擁有的代碼基於此https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader.readAsDataURL，但我想選擇創建多個上傳按鈕，並且每個上傳按鈕應上傳一個圖像獨立於其他按鈕。 這是我的代碼：

<!DOCTYPE html>

     <a class="btn btn-default" href="#" role="button" onclick = "addEntry()" >Add</a>
      <script>
            function addEntry() {
            var browse = document.createElement("INPUT");
            browse.setAttribute("type", "file");

            picture = document.createElement("img");
            picture.src = "";
            picture.setAttribute("alt", "No image chosen");
            picture.setAttribute("height","100");
            browse.setAttribute("onchange", "previewFile(picture)");
            document.body.appendChild(browse);
            document.body.appendChild(picture);
            }

            function previewFile(inPic){

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


            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file); 
            } else {
                preview.src = "";
            }
            }

Answer 1

無需使用文件閱讀器。

如果您不必支持舊版瀏覽器，請使用FormData

從那里的代碼片段：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"

// HTML file input user's choice...
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object...
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

動態上傳HTML和Javascript圖片

問題描述

1 個解決方案

解決方案1
0 已采納 2015-01-26 15:32:22

動態上傳HTML和Javascript圖片

問題描述

1 個解決方案

解決方案1 0 已采納 2015-01-26 15:32:22

解決方案1
0 已采納 2015-01-26 15:32:22