এজ্যাক্সের মাধ্যমে ফাইলগুলি আপলোড করার জন্য আর আইফ্রেমেসের প্রয়োজন নেই। আমি সম্প্রতি এটি নিজের দ্বারা সম্পন্ন করেছি। এই পৃষ্ঠাগুলি দেখুন:
AJAX এবং jQuery এর সাথে HTML5 ফাইল আপলোড ব্যবহার করা
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
উত্তরটি আপডেট করে এটিকে পরিষ্কার করুন। আকার চেক করতে getSize ফাংশন ব্যবহার করুন বা প্রকারগুলি পরীক্ষা করতে getType ফাংশন ব্যবহার করুন। প্রগতিবার এইচটিএমএল এবং সিএসএস কোড যুক্ত হয়েছে।
var Upload = function (file) {
this.file = file;
};
Upload.prototype.getType = function() {
return this.file.type;
};
Upload.prototype.getSize = function() {
return this.file.size;
};
Upload.prototype.getName = function() {
return this.file.name;
};
Upload.prototype.doUpload = function () {
var that = this;
var formData = new FormData();
// add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax({
type: "POST",
url: "script",
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', that.progressHandling, false);
}
return myXhr;
},
success: function (data) {
// your callback here
},
error: function (error) {
// handle error
},
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
});
};
Upload.prototype.progressHandling = function (event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
};
কীভাবে আপলোড ক্লাস ব্যবহার করবেন
//Change id to your id
$("#ingredient_file").on("change", function (e) {
var file = $(this)[0].files[0];
var upload = new Upload(file);
// maby check size or type here with upload.getSize() and upload.getType()
// execute upload
upload.doUpload();
});
প্রগতিবার এইচটিএমএল কোড
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
প্রগতিবার সিএসএস কোড
#progress-wrp {
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar {
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status {
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
}