使用輸入文件按鈕上傳圖像或拖放文件

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>

問題是當我在放置區拖放圖像時，我無法更改輸入文件按鈕的值。 當然，我無法上傳文件，因為輸入文件仍為空。 順便說一句，我試過寫$('#userfile').val(event.dataTransfer.files[0]); 在drag_drop函數中，我的控制台中的結果是：

未捕獲的DOMException：無法在'HTMLInputElement'上設置'value'屬性：此input元素接受一個文件名，該文件名只能以編程方式設置為空字符串。

Answer 1

注意 ：請注意， 沒有跨瀏覽器方式上傳沒有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屬性，從代碼中給出，我看到您處理了多個文件。

完整教程