画像を入力ファイルボタンでアップロードするか、ファイルをドラッグ＆ドロップします

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]);を書くことを試みていると私のコンソールでの結果は次のとおりです。

キャッチされない例外：DOMException：「HTMLInputElementの」 に「の値」プロパティの設定に失敗しました：この入力要素は、ファイル名を受け入れます はプログラムで空の文字列にのみ設定できます。

Answer 1

NBは：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