मैं jQuery फ़ाइल अपलोड प्लगइन का उपयोग कर रहा हूं जिसमें प्रोग्रामिंग रूप से फ़ाइलों को अपलोड करने के लिए API है। प्रलेखन लिखते हैं:प्रोग्रामेटिक रूप से फ़ाइल अपलोड करना
$('#fileupload').fileupload('add', {files: filesList});
समस्या यह है कि मैं क्या filesList होना चाहिए पता नहीं है है। मैं कोशिश की है असफल निम्नलिखित:
$('#fileupload').fileupload('add', {files: ['/Users/bob/Desktop/test.png']});
क्या filesList होना चाहिए वास्तव में?
the documentation के शब्दों में:
दूसरा तर्क फ़ाइलों संपत्ति के रूप में फ़ाइल या ब्लॉब ऑब्जेक्ट की श्रृंखला (या सरणी की तरह सूची) के साथ एक वस्तु होना चाहिए।
आप फ़ाइल प्रकार इनपुट या HTML5 फ़ाइल API की फ़ाइलों की संपत्ति का उपयोग कर फ़ाइल ऑब्जेक्ट प्राप्त कर सकते हैं।
FileAPI और फ़ाइल आदानों के साथ काम करने के बारे में और अधिक विस्तार के लिए देखें: MDC - Using files from web applications
"आप फ़ाइल प्रकार इनपुट या HTML5 फ़ाइल एपीआई की फाइल प्रॉपर्टी का उपयोग कर फाइल ऑब्जेक्ट प्राप्त कर सकते हैं।" -> यह बिल्कुल मेरा सवाल है। फाइल लाने के लिए प्रासंगिक एपीआई/वाक्यविन्यास क्या है? – Randomblue
मुझे यह इंगित करना चाहिए कि ग्राहक द्वारा फ़ाइल को चुनने के बिना किसी फ़ाइल को हथियाने से सुरक्षा प्रभावों के कारण यह प्राप्त नहीं किया जा सकता है। –
मैं इसे समझता हूं। लेकिन फिर एपीआई क्यों प्रदान की जाती है? – Randomblue
प्रलेखन आपको बताता है
The second argument must be an object with an array (or array-like list) of File
or Blob objects as files property.
जबकि Mozilla's DOM File object
करने के लिए फ़ाइल को जोड़ने आप इन की एक सरणी की आपूर्ति करना चाहिए ऑब्जेक्ट्स
हास्यास्पद उदाहरण :) जो काम करता है!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="fileupload"></div>
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br />
<input class="zz" type="file" name="files[]" multiple><br /><br /><br /><br />
<input id="envoi_fax" type="submit" class="btn btn-primary start"> <i class="icon-upload icon-white"></i><span>Start upload</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-fp.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
<script>
$('document').ready(function() {
var mycars = new Array();
$('#fileupload').fileupload({
url:'server/php/',
dataType: 'json',
singleFileUploads: false,
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
$('.zz').bind('change', function (e) {
var f;
f = e.target.files || [{name: this.value}];
mycars.push(f[0]);
});
$("#envoi_fax").click(function() {
$('#fileupload').fileupload('send', {files: mycars});
});
});
</script>
</body>
</html>
कुछ स्पष्टीकरण अच्छा होगा –
मैं वास्तव में यह 5+ ऊपर वोट देना चाहता हूं। मैं फ़ाइल शीर्षक बनाने और/या उदाहरण गुणों द्वारा उपयोग की जाने वाली सूची तक पहुंचने के तरीके के बारे में अपने सिर को लपेट नहीं सका। उदाहरण के लिए बहुत बहुत धन्यवाद !! – KDrewiske
मैं वास्तव में यह एक उपरोक्त देना चाहता हूं लेकिन मैं सहमत हूं कि उत्तर वास्तव में कुछ स्पष्टीकरण से लाभान्वित होगा। –
@ pedro.dz जवाब मुझे मदद मिली:
$(function() {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/';
var filesList=new Array();
$('.fileupload').fileupload({
autoUpload: false,//
url: url,
dataType: 'json',
sequentialUploads: true,
add: function (e, data) {
console.log(data);
$.each(data.files, function (index, file) {
filesList.push(file);
console.log('Added file: ' + file.name);
});
console.log(filesList);
},
send: function (e, data) {
console.log('send:');
console.log(e);
console.log(data);
data.formData = {example: "my data"};
},
done: function (e, data) {
console.log('done:');
console.log(e);
console.log(data);
$.each(data.result.files, function (index, file) {
console.log(file);
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded/data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
$("#uploadfiles").click(function() {
alert('sending');
$('.fileupload').fileupload('send', {files: filesList});
});
});
कई अपलोड के लिए:
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>#1 Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>#2 Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files2[]" multiple>
</span>
<input id="formData" type="text" name="formData" value="21212121212">
<input id="uploadfiles" type="button" value="Send">
आप निश्चित रूप से इस तरह उपयोगकर्ता के कंप्यूटर से किसी भी फाइल अपलोड नहीं कर सकते। वह कहाँ नेतृत्व करेंगे। – kapa
@ बज़मेगाकापा: कृपया यहां देखें [https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest), "उदाहरण: गैर-HTTP सिंक्रोनस अनुरोध" – Randomblue
हां, यह स्थानीय स्तर पर चलने वाली स्क्रिप्ट से प्राप्त करने के लिए काम कर सकता है एक पंक्ति। लेकिन आप दूरस्थ सर्वर पर फ़ाइलों को अपलोड करने के लिए इसका उपयोग नहीं कर सकते हैं। – kapa