Javascript 使用“输入文件”按钮上载图像或拖放文件

现在我正在学习使用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>

问题是，当我在拖放区拖放图像时，我无法更改输入文件按钮的值。当然，我不能上传文件，因为输入文件仍然是空的。顺便说一句，我试着写$'userfile'.valevent.dataTransfer.files[0]；在上面的拖放功能中，我的控制台中的结果是：

未捕获的DomeException:未能在上设置“value”属性 “HTMLInputElement”：此输入元素接受文件名，该文件名可能 只能以编程方式设置为空字符串

注：请注意。另请注意，这可能是限制尝试为文件上载输入字段分配值的安全影响的原因：如果可以通过编程方式分配值，请想象如下：

$("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属性，根据代码，我看到您正在处理多个文件

---

仅供参考，我希望不使用AJAX手动上传文件。