AJAX और jQuery

Question

के साथ HTML5 फ़ाइल अपलोड का उपयोग करना मान्य है, स्टैक ओवरफ़्लो पर आसपास के समान प्रश्न हैं, लेकिन ऐसा लगता है कि कोई भी मेरी आवश्यकताओं को पूरा नहीं करता है।

यहाँ मैं क्या करने के लिए देख रहा हूँ है:

• अपलोड डेटा की एक पूरी प्रपत्र, CodeIgniter के फाइल अपलोड पुस्तकालय के साथ एक एकल फ़ाइल
• कार्य है एक टुकड़ा जिनमें से

यहां तक ​​कि सब ठीक है। डेटा को मेरे डेटाबेस में मिलता है क्योंकि मुझे इसकी आवश्यकता है। लेकिन मैं यह भी एक AJAX पोस्ट के माध्यम से मेरी प्रपत्र सबमिट करना चाहते हैं:

• देशी एचटीएमएल 5 फ़ाइल एपीआई का उपयोग करना, फ्लैश या एक iframe समाधान
• अधिमानतः निम्न स्तर .ajax() jQuery विधि के साथ इंटरफ़ेस नहीं

मुझे लगता है कि मैं कल्पना कर सकता हूं कि जब फ़ाइल का मूल्य शुद्ध जावास्क्रिप्ट का उपयोग करके बदलता है, तो फ़ाइल को स्वत: अपलोड करके इसे कैसे किया जाए, लेकिन मैं इसे सभी में करूँगा jQuery में सबमिट करने के लिए। मुझे लगता है कि क्वेरी स्ट्रिंग्स के माध्यम से करना संभव नहीं है क्योंकि मुझे पूरी फाइल ऑब्जेक्ट को पास करने की ज़रूरत है, लेकिन इस बिंदु पर मुझे क्या करना है, इस पर थोड़ा सा खो गया है।

क्या यह हासिल किया जा सकता है?

Answer 1

यह बहुत कठिन नहीं है। सबसे पहले, FileReader Interface पर एक नज़र डालें।

तो, जब फ़ॉर्म सबमिट सबमिट करने की प्रक्रिया और

var file = document.getElementById('fileBox').files[0]; //Files[0] = 1st file 
var reader = new FileReader(); 
reader.readAsText(file, 'UTF-8'); 
reader.onload = shipOff; 
//reader.onloadstart = ... 
//reader.onprogress = ... <-- Allows you to update a progress bar. 
//reader.onabort = ... 
//reader.onerror = ... 
//reader.onloadend = ... 


function shipOff(event) { 
    var result = event.target.result; 
    var fileName = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg' 
    $.post('/myscript.php', { data: result, name: fileName }, continueSubmission); 
} 

फिर पकड़ने, सर्वर साइड (अर्थात myscript.php) पर:

$data = $_POST['data']; 
$fileName = $_POST['name']; 
$serverFile = time().$fileName; 
$fp = fopen('/uploads/'.$serverFile,'w'); //Prepends timestamp to prevent overwriting 
fwrite($fp, $data); 
fclose($fp); 
$returnData = array("serverFile" => $serverFile); 
echo json_encode($returnData); 

या कुछ ऐसा। मुझे गलत हो सकता है (और यदि मैं हूं, कृपया मुझे सही करें), लेकिन इस फ़ाइल को 1287916771myPicture.jpg जैसे /uploads/ में अपने सर्वर पर संग्रहीत करना चाहिए, और JSON चर के साथ प्रतिक्रिया दें (continueSubmission() फ़ंक्शन पर) जिसमें सर्वर पर फ़ाइल नाम है ।

fwrite() और jQuery.post() देखें।

ऊपर पेज यह विवरण readAsBinaryString(), readAsDataUrl(), और readAsArrayBuffer() अपने अन्य जरूरतों के लिए (जैसे चित्र, वीडियो, आदि) का उपयोग करने के लिए कैसे करें।

Answer 2

jQuery (और FormData एपीआई) के बिना आप कुछ इस तरह उपयोग कर सकते हैं के साथ

:

function readFile(file){ 
    var loader = new FileReader(); 
    var def = $.Deferred(), promise = def.promise(); 

    //--- provide classic deferred interface 
    loader.onload = function (e) { def.resolve(e.target.result); }; 
    loader.onprogress = loader.onloadstart = function (e) { def.notify(e); }; 
    loader.onerror = loader.onabort = function (e) { def.reject(e); }; 
    promise.abort = function() { return loader.abort.apply(loader, arguments); }; 

    loader.readAsBinaryString(file); 

    return promise; 
} 

function upload(url, data){ 
    var def = $.Deferred(), promise = def.promise(); 
    var mul = buildMultipart(data); 
    var req = $.ajax({ 
     url: url, 
     data: mul.data, 
     processData: false, 
     type: "post", 
     async: true, 
     contentType: "multipart/form-data; boundary="+mul.bound, 
     xhr: function() { 
      var xhr = jQuery.ajaxSettings.xhr(); 
      if (xhr.upload) { 

       xhr.upload.addEventListener('progress', function(event) { 
        var percent = 0; 
        var position = event.loaded || event.position; /*event.position is deprecated*/ 
        var total = event.total; 
        if (event.lengthComputable) { 
         percent = Math.ceil(position/total * 100); 
         def.notify(percent); 
        }      
       }, false); 
      } 
      return xhr; 
     } 
    }); 
    req.done(function(){ def.resolve.apply(def, arguments); }) 
     .fail(function(){ def.reject.apply(def, arguments); }); 

    promise.abort = function(){ return req.abort.apply(req, arguments); } 

    return promise; 
} 

var buildMultipart = function(data){ 
    var key, crunks = [], bound = false; 
    while (!bound) { 
     bound = $.md5 ? $.md5(new Date().valueOf()) : (new Date().valueOf()); 
     for (key in data) if (~data[key].indexOf(bound)) { bound = false; continue; } 
    } 

    for (var key = 0, l = data.length; key < l; key++){ 
     if (typeof(data[key].value) !== "string") { 
      crunks.push("--"+bound+"\r\n"+ 
       "Content-Disposition: form-data; name=\""+data[key].name+"\"; filename=\""+data[key].value[1]+"\"\r\n"+ 
       "Content-Type: application/octet-stream\r\n"+ 
       "Content-Transfer-Encoding: binary\r\n\r\n"+ 
       data[key].value[0]); 
     }else{ 
      crunks.push("--"+bound+"\r\n"+ 
       "Content-Disposition: form-data; name=\""+data[key].name+"\"\r\n\r\n"+ 
       data[key].value); 
     } 
    } 

    return { 
     bound: bound, 
     data: crunks.join("\r\n")+"\r\n--"+bound+"--" 
    }; 
}; 

//---------- 
//---------- On submit form: 
var form = $("form"); 
var $file = form.find("#file"); 
readFile($file[0].files[0]).done(function(fileData){ 
    var formData = form.find(":input:not('#file')").serializeArray(); 
    formData.file = [fileData, $file[0].files[0].name]; 
    upload(form.attr("action"), formData).done(function(){ alert("successfully uploaded!"); }); 
}); 

FormData API की मदद से

तुम सिर्फ FormData वस्तु अपने फ़ॉर्म के सभी क्षेत्रों को जोड़ने और $ .ajax के माध्यम से भेज करने के लिए है ({url: url, data: formData, processData: false, content टाइप: गलत, टाइप: "POST"})