在 HTML 和 Javascript 中动态上传图像

Question

如何使用 HTML 和 Javascript 上传多张单独的图片？我拥有的代码基于此 https://developer.mozilla.org/en-US/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 中动态上传图像

Dynamically uploading images in HTML and Javascript

javascript

html

image

file

upload