javascript - 使用输入文件按钮上传图像或拖放文件

Question

现在我正在学习使用 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]); 并且我的控制台中的结果是:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Answer 1

注意:请注意 There is no cross-browser way to upload dragged & dropped files without Ajax .另请注意(这可能是限制的原因)尝试为文件上传输入字段分配值的安全隐患:如果可以通过编程方式分配值，那么想象一下:

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

所以我们必须使用AJAX。也就是说，您只需要创建一个新的 FormData 实例并将您的放置事件中的 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