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();
    }
})();

我使用的脚本是使用表单操作属性来上传文件。由于表单操作是发送电子邮件，我将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

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

1 个答案: