使用输入文件按钮上传图像或拖放文件答案

【问题标题】：Upload Image with input file button or drag and drop the file使用输入文件按钮上传图像或拖放文件
【发布时间】：2017-05-09 02:31:46
【问题描述】：

现在我正在学习使用 HTML5 和 JavaScript (JQuery) 上传文件。我遇到了问题。所以，下面是我的应用程序的预览。

从这个应用程序中，我想上传文件，您可以从输入按钮中选择文件，也可以将文件拖放到拖放区。

这里是代码：

<div class="row">
    <div id="blah" class="col-lg-4 dropzone" ondrop="drag_drop(event)" ondragover="return false">
        <p>Drop Your Image Here</p>
    </div>
    <div class="col-lg-3">
        <?php echo form_open_multipart('umum/uploadFile', ['id' => 'form_upload']);?>
            <div class="form-group">
                <label for="userfile">File input</label>
                <input type="file" id="userfile" name="userfile">
                <p class="help-block">Only image file allowed to upload here.</p>
            </div>
            <button class="btn btn-primary" onclick="uploadFile()">Upload</button>
        <?php echo form_close(); ?>
    </div>
</div>

然后是我的脚本：

<script>
        // preview the file that will be uploaded
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $('#blah').html('<img src="'+event.target.result+'" alt="your image">');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        // manual select file from input file button
        $("#userfile").change(function(){
            readURL(this);
        });

        // drag and drop file image
        $(function() {
            $('#blah').bind('dragover', function() {
                $(this).addClass('dropzone-active');
            });
            $('#blah').bind('dragleave', function() {
                $(this).removeClass('dropzone-active');
            });
        });

        function drag_drop(event) {
            event.preventDefault();

            // parsing data to preview the file before upload
            readURL(event.dataTransfer);

            // alert(event.dataTransfer.files[0]);
            // alert(event.dataTransfer.files[0].name);
            // alert(event.dataTransfer.files[0].size+" bytes");
        }
    </script>

问题是当我将图像拖放到拖放区时，我无法更改输入文件按钮的值。当然，我无法上传文件，因为输入文件仍然是空的。顺便说一句，我曾尝试在上面的 drag_drop 函数中写$('#userfile').val(event.dataTransfer.files[0]);，结果在我的控制台中是：

未捕获的 DOMException：无法设置“值”属性 'HTMLInputElement'：这个输入元素接受一个文件名，它可以只能以编程方式设置为空字符串。

【问题讨论】：

仅供参考，我想手动上传文件，而不是使用 AJAX。

标签： javascript jquery html file-upload drag-and-drop

【解决方案1】：

注意：注意There is no cross-browser way to upload dragged & dropped files without Ajax。还要注意（这可能是限制的原因）尝试为文件上传输入字段分配值的安全隐患：如果可以这样以编程方式分配值，想象一下：

$("input[type=file]").val("passwords.txt");

所以我们必须使用 AJAX。也就是说，您只需要创建一个新的 FormData 实例并将您的 drop 事件中的 dataTransfer.files 属性附加到它：

    function drag_drop(event) {
        event.preventDefault();
        $.each(dataTransfer.files, function(i, file) {
            uploadData.append( "userfile", file);
        });
    }

    var $form = document.querySelector('form'),
    ajaxData = new FormData($form);

    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: ajaxData,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false // Important for file uploads
    });

如果您首选手动上传的原因是在提交时将所有文件与表单一起上传，请考虑创建一个隐藏输入字段并将其值设置为 AJAX 成功返回时上传文件的位置。

您可能还想在文件输入字段中设置multiple 属性，从您的代码中给出，我看到您正在处理多个文件。

Full tutorial

【讨论】：