AJAX请求php脚本

Question

So the problem is: a user uplaods a file. I use е.PreventDefault(); to prevent the page from refreshing after the upload. Under the file upload form i've made a list of all the user's file names. Obviously the newly uploaded file name isn't in the list. After refreshing the page it gets in the list, but the business logic is that the file's name should go in the list withouth refreshing the page.

function showNewFileProperies() {
    var xhttp;           
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
           document.getElementById("results").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", "../../app/Models/UserFiles.php" , true);
    xhttp.send();
}

This is the request with which I thought my problem would be solved.

namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class UserFiles extends Model{
   protected $table = 'files';

   public function getUserFiles(){
       $getFiles = Filecontent::where('userid', Auth::id())->get();
       foreach($getFiles as $getFile) {
           $result = $getFile->filename;
           return $result;
       }
   }
}

I'm using Laravel and Dropzone.js. The js code i put in the success event of dropzone.js

Answer 1

Sorry for the delay in response. Here is what I used to achieve what you are describing. Sorry for the bad indenting but this editor is really bad.

Dropzone.options.documentDropzone = {
paramName: "file",
dictDefaultMessage: "Drag your document over this box to upload or click here",
maxFilesize: 100, // MB
maxFiles: 10,

addRemoveLinks: true,
dictRemoveFile: 'Remove Attachment',
accept: function(file, done) {
    done();
},
init: function() {
    this.on("addedfile", function(file) {
        busy_uploading = true;
    });
    this.on('removedfile', function(file){
        remove_file(file.previewElement, file.fileID);
        if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
            busy_uploading = false;
        }
    });
    this.on("complete", function (file) {
        if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
            busy_uploading = false;
        }
    });
},
success: function(file, response) {
    response = JSON && JSON.parse(response) || $.parseJSON(response);
    if(response.error) {
        var node, _i, _len, _ref, _results;
        var message = response.error;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.push(node.textContent = message);
        }

        return _results;
    } else {
        for(var i = 0; i < response.file_id.length; i++) {
            file.fileID = response.file_id[i];
            file.fileEXT = response.file_ext[i];
            add_file_id(response.file_id[i]);
            //You can add the uploaded item in your list here
        }
        return file.previewElement.classList.add("dz-success");
    }
}
};

So this is roughly what I used. You can simply add the item on your list in the success function since that is where you will get the response from the server.

I did not include the php because it is just your basic upload script. This will work with as many files as you wish.

If you need more help just add a comment and I will try to assist you as best I can.