如何使用javascript进行拖放图像/文件上传答案

【问题标题】：how to do drag and drop image/file upload using javaScript如何使用javascript进行拖放图像/文件上传
【发布时间】：2016-08-31 11:57:27
【问题描述】：

javaScript。我想在 dropzone 的帮助下上传图片或文件。当文件上传时，一次应该显示文件..

<html>
<head>
    <meta charset="utf-8">
    <title>variables</title>        
    <style>
        #drop_zone {
        background-color: #EEE; 
        border: #999 5px dashed;
        width: 290px; 
        height: 200px;
        padding: 8px;
        font-size: 18px;
        }
    </style>
    <script>
        function drag_drop(event) {
        event.preventDefault();
        alert(event.dataTransfer.files[0]);
        alert(event.dataTransfer.files[0].name);
        alert(event.dataTransfer.files[0].size+" bytes");
        /*  This is where to begin uploading the file with Ajax and upload progress bar to PHP script */
        /*   https://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP */       
    }
    function _(el){
    return document.getElementById(el);
    }
    function uploadFile(){
        var file = _("file1").files[0];
        // alert(file.name+" | "+file.size+" | "+file.type);
        var formdata = new FormData();
        formdata.append("file1", file);
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "file_upload_parser.php");
        ajax.send(formdata);
    }
    function progressHandler(event){
        _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
        var percent = (event.loaded / event.total) * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
    }
    function completeHandler(event){
        _("status").innerHTML = event.target.responseText;
        _("progressBar").value = 0;
    }
    function errorHandler(event){
        _("status").innerHTML = "Upload Failed";
    }
    function abortHandler(event){
        _("status").innerHTML = "Upload Aborted";
    }
    </script>
</head>
<body>
    <h1>File Upload Drop Zone</h1>
    <div id="drop_zone" ondrop="drag_drop(event)" ondragover="return false"></div>
    <form id="upload_form" enctype="multipart/form-data" method="post">
      <input type="file" name="file1" id="file1"><br>
      <input type="button" value="Upload File" onclick="uploadFile()">
      <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
      <h3 id="status"></h3>
      <p id="loaded_n_total"></p>
    </form>     
</body>

你能告诉我我哪里错了，什么是问题...... 我们可以在 ajax 的帮助下使用上传文件吗？如果可以，请给我发送代码，我们将如何上传文件和图像

【问题讨论】：

标签： javascript php jquery html file-upload

【解决方案1】：

请参考 PHP ajax 图片上传教程： https://www.formget.com/ajax-image-upload-php/

【讨论】：