HTML 5使用拖放功能上傳文件

Question

我想使用拖放上傳文件

我正在使用laravel框架5.4和JS。問題出在上傳完成後會發生什麼。我可以看到文件已上傳到文件夾，但無法獲取文件的名稱或對其的任何引用。

這是我的看法..我上傳文件，發送電子郵件附件

{!! Form::open([ 
    'url' => 'send', 
    'files' => true, 
    'id'=>'upload', 
    'enctype'=> 'multipart/form-data' 
]) !!} 
    <div class="box-body"> 
    <div class="form-group"> 
     {!! Form::text('to', null, ['class' => 'form-control', 'placeholder' => 'Send to']) !!} 
    </div> 
    <div class="form-group"> 
     {!! Form::text('subject', null, ['class' => 'form-control', 'placeholder' => 'Subject']) !!} 
    </div> 
    <div class="form-group"> 
     {!! Form::textarea('content', null, ['class' => 'form-control message-body wysihtml5-sandbox', 'placeholder' => 'Message']) !!} 
    </div> 
    <div class="form-group"> 
     <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="320000" /> 
     <div> 
      <label for="fileselect">Files to upload:</label> 
      <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> 
      <div id="filedrag">or drop files here</div> 
     </div> 
     <div id="progress"></div> 
     <div id="messages"> 
     </div> 
    </div><!-- /.box-body --> 
    <div class="box-footer"> 
    <div class="pull-right"> 
     {{--<button class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button>--}} 
     {!! Form::submit('Send', ['class' => 'btn btn-primary submit']) !!} 
        </div> 
    <div class="form-group"> 
     <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="320000" /> 
     <div> 
      <label for="fileselect">Files to upload:</label> 
      <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> 
      <div id="filedrag">or drop files here</div> 
     </div> 
     <div id="progress"></div> 
     <div id="messages"> 
     </div> 
    </div><!-- /.box-body --> 
    <div class="box-footer"> 
     {!! Form::submit('Send', ['class' => 'btn btn-primary submit']) !!} 

我使用

(function() { 

    var send = XMLHttpRequest.prototype.send, 
     token = $('meta[name=csrf-token]').attr('content'); 
    XMLHttpRequest.prototype.send = function(data) { 
     this.setRequestHeader('X-CSRF-Token', token); 
     return send.apply(this, arguments); 
    } 


    // getElementById 
    function $id(id) { 
     return document.getElementById(id); 
    } 
    // output information 
    function Output(msg) { 
     var m = $id("messages"); 
     m.innerHTML = msg + m.innerHTML; 
    } 
    // file drag hover 
    function FileDragHover(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     e.target.className = (e.type == "dragover" ? "hover" : ""); 
    } 
    // file selection 
    function FileSelectHandler(e) { 

     // cancel event and hover styling 
     FileDragHover(e); 

     // fetch FileList object 
     var files = e.target.files || e.dataTransfer.files; 

     // process all File objects 
     for (var i = 0, f; f = files[i]; i++) { 
      UploadFile(f); 
     } 

    } 

    function UploadFile(file) { 

     // following line is not necessary: prevents running on SitePoint servers 

     var xhr = new XMLHttpRequest(); 

     if (xhr.upload && file.size <= $id("MAX_FILE_SIZE").value) { 

      // create progress bar 
      var o = $id("progress"); 
      var progress = o.appendChild(document.createElement("p")); 
      progress.appendChild(document.createTextNode("upload " + file.name)); 


      // progress bar 
      xhr.upload.addEventListener("progress", function (e) { 
       var pc = parseInt(100 - (e.loaded/e.total * 100)); 
       progress.style.backgroundPosition = pc + "% 0"; 
      }, false); 

      // file received/failed 
      xhr.onreadystatechange = function (e) { 
       if (xhr.readyState == 4) { 
        progress.className = (xhr.status == 200 ? "success" : "failure"); 
       } 
      }; 

      // start upload 
      xhr.open("POST", '/getAttachments', true); 
      xhr.setRequestHeader("X_FILENAME", file.name); 
      xhr.send(file); 
     } 
    } 

    // initialize 
    function Init() { 

     var fileselect = $id("fileselect"), 
      filedrag = $id("filedrag"), 
      submitbutton = $id("submitbutton"); 

     // file select 
     fileselect.addEventListener("change", FileSelectHandler, false); 

     // is XHR2 available? 
     var xhr = new XMLHttpRequest(); 
     if (xhr.upload) { 

      // file drop 
      filedrag.addEventListener("dragover", FileDragHover, false); 
      filedrag.addEventListener("dragleave", FileDragHover, false); 
      filedrag.addEventListener("drop", FileSelectHandler, false); 
      filedrag.style.display = "block"; 

     } 

    } 

    // call initialization file 
    if (window.File && window.FileList && window.FileReader) { 
     Init(); 
    } 
})(); 

我使用的腳本腳本使用表單action屬性上傳文件。由於表單操作是發送電子郵件，因此我將xhr.open（「POST」，'/ getAttachments'，true）路由到我在send方法中調用的不同控制器方法。

我的控制器方法@getAttachments和@send

public function getAttachments() 
if ($fn) { 
// AJAX call 
file_put_contents(
    'uploads/' . $fn, 
    file_get_contents('php://input') 
); 
return $fn ; // HERE $fn = false though the name of the file stored is correct 
}} 

，我試圖

Storage::put($fn, file_get_contents('php://input')); 
$file = Storage::get($fn) ; return $file;); 

public function send(Request $request) { 
$file = $this->getAttachments(); 
// $file = $false} 

我想它是返回false，因爲如果我打發送頁面刷新 和$ _ SERVER ['HTTP_X_FILENAME ']變量丟失，所以我嘗試將它保存到會話中，但沒有用。無法獲取文件

public function getAttachments() 
{ 
    $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); 
    if ($fn) { 
     session(['attachments' => $fn]); 
     Storage::put($fn, file_get_contents('php://input')); 
    } 
} 
public function send(Request $request) { 
     //Grab uploaded file 
    if ($request->session()->exists('attachments')) { 
     $attachments = $request->session()->pull('attachments'); 
     $files = Storage::get($attachments); 
    } 

不知道爲什麼，但它不存儲到會話中。

Answer 1

不知道你到底在做什麼。但是，如果你想通過拖放上傳文件，然後刪除我建議你使用這個真棒JS：

http://www.dropzonejs.com/

如果你想看到的實施，那麼你可以點擊此處查看了：

https://github.com/xparthx/Laravel-AWS-S3