Krajee Bootstrap-Datei ein, fangen AJAX Erfolg Antwort

Ich bin mit Krajee das Bootstrap-File-Input-plugin zum ausführen eines Uploads via AJAX-call.

Hier ist der link zu der Krajee plugin AJAX Rubrik: Krajee plugin AJAX

JS und PHP (codeigniter) codes, die ich verwende sind folgende:

JS:

<script>        
    $("#file-upload").fileinput({ 
        'allowedFileExtensions' : ['csv'],
        'maxFileSize': 5120,
        'maxFileCount': 1,
        'uploadUrl': 'dashboard/uploader',
        'elErrorContainer': '#errorBlock',
        'uploadAsync': true,
        'msgInvalidFileExtension': 'Invalid extension for file "{name}". Only "{extensions}" files are supported.',
        'uploadExtraData': {csrf_token_name: $("input[name=csrf_token_name]").val()}
    });       
</script>

PHP:

public function uploader(){
    $config['upload_path'] = './csv_uploads/';
    $config['allowed_types'] = 'csv';
    $config['max_size'] = '5120';

    $this->upload->initialize($config);
    if (!$this->upload->do_upload("file-upload")){
        $data['error'] = 'The following error occured : '.$this->upload->display_errors().'Click on "Remove" and try again!';
        echo json_encode($data); 
    } else {
        echo json_encode("success"); 
    }            
}

Ich jetzt eine Antwort bekommen von PHP, was auch immer es ist ein Fehler oder ein Erfolg als JSON, ich ging durch die plugin Dokumentation und ich kann immer noch nicht herausfinden, wie die zu fangen, die AJAX-response und handeln nach, die Antwort ist, wie wir tun, jQuery ajax success Funktion : 

success: function (response) {
            //Deal with the server side "response" data.
         },

Wie kann ich dies tun?

InformationsquelleAutor oussama kamal | 2015-04-14
  1. 12

    Können Sie sich eine demo hier live-demo

    Denken Sie daran, uploadAsync false wenn Sie möchten, dass der Erfolg der Veranstaltung Feuer

    Beispiel-code:

    JS

    $("#input-id").fileinput({
    showRemove:false,
    showPreview: false,
    uploadUrl: "../xxxx/xxxx/XXXXXX.php", //server upload action
    uploadAsync: false,
    uploadExtraData: function() {
        return {
            bdInteli: xxxx
        };
    }
});

//CATCH RESPONSE
$('#input-id').on('filebatchuploaderror', function(event, data, previewId, index) {
var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader;
});

$('#input-id').on('filebatchuploadsuccess', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader;
    alert (extra.bdInteli + " " +  response.uploaded);
});

    PHP

    $nombre = $_FILES["ficheroExcel"]["name"];
$bdInteli = $_POST['bdInteli'];
if (move_uploaded_file($_FILES["ficheroExcel"]["tmp_name"], $nombre) ){
    $output = array('uploaded' => 'OK' );
} else {
   $output = array('uploaded' => 'ERROR' );
}
echo json_encode($output);
    • dieser code funktioniert nicht
    • Sie müssen uploadAsync falsch. Ich habe aktualisiert, der code
    InformationsquelleAutor Xavi Guirao
  2. 7

    Lesen Sie die Abschnitt "Ereignisse" auf der plugin-Dokumentation Seite zu verstehen, die verschiedenen Veranstaltungen, die von dem plugin.

    Es hängt davon ab, wie Sie sich eingerichtet haben, die ajax-upload in das plugin. Das plugin bietet zwei ajax-upload-Modi synchron und asynchron wie in der Dokumentation beschrieben. Die asynchronen wenn Sie uploadAsync - Eigenschaft auf true.

    FÜR AJAX-ERFOLG-FALLE:

    FÜR AJAX ERROR TRAP:

    In Ihrem Fall, die Sie eingestellt haben uploadAsync auf true gesetzt - so verwenden Sie die asynchrone Einstellungen/Ereignisse.

    • Dies ist die richtige Antwort. Das akzeptiert man noch nicht für mich gearbeitet.
    InformationsquelleAutor Kartik V
  3. 2

    können Sie verwenden Sie diese Beispiel-code in Ihrem test.in meinem test,meine Antwort Daten wie diese:

    response data:
{
"ver":"1.0",
"ret":true,
"errmsg":null,
"errcode":0,
"data":{
    "status":"upload success",
    "originalFilename":"testFileName.txt",
    "fileName":"excelFile",
    "fileType":"text/plain",
    "fileSize":1733
}

 javascript code:
 $('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var response = data.response;
    if(response.ret ) {
        alert("upload success!"+data.response.data);
    }else{
        alert("upload failed!"+response.errmsg)
    }
    alert('File uploaded triggered'+form+"response:"+response);
    console.info(response.data);
});
    InformationsquelleAutor user3033075
  4. 0

    finden Sie diese Antwort, ich habe getan, wie diese

    javascript :

    $('#input-id').on('fileuploaded', function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra,
        response = data.response, reader = data.reader;
    console.log('File uploaded successfully : ID '+ data.response.d);
});

    In ASHX Datei hinzufügen-Antwort auf den Kontext:

    context.Response.ContentType = "application/json";
string myId = "NewwId 1";
var wrapper = new { d = myId };
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(wrapper));
    InformationsquelleAutor Ashi
Schreibe einen Kommentar