woeful
یک شنبه 15 تیر 1393, 19:03 عصر
سلام
دوستان من دنبال یه کد آپلود فایل با jquery بودم که بشه اونو سفارشی کرد (برای سایتم میخاستم) پلاگین های آماده زیادی هست ولی خب سفارشی کردن اونا تا جایی که من میدونم و میخاستم این کارو بکنم خیلی سخت بود در ضمن پلاگینی که در همه مرورگر ها جواب بده پیدا نکردم .
خلاصه اینکه از دوستان کمک میخام راهنمایی کنن چه کار کنم.
ویژگی هایی که من میخاستم کد مورد نظر داشته باشه :
۱- progress bar که در همه مرورگر های کار کنه
۲- امکان آپلود چند فایل به صورت جداگانه و هم زمان : یعنی وقتی کاربر فایلی رو انتخاب میکنه آپلود شروع بشه و پروگرس بار روند اونو نشون بده و هم زمان با اون کاربر بتونه فایل دیگه ای رو انتخاب کنه و یه پروگرس بار دیگه هم نشون داده بشه و این دوتا فایل به صورت هم زمان روند آپلودشون نشون داده بشه
۳- سفارشی بشه : بشه قبل و بعد هر آپلود یه سری اطلاعات نشون کاربر بدیم
۴- استایلش هم قابل تغییر باشه
من خودم شرو کردم به نوشتن یک کد آپلود ولی اصلا خوب پیش نمیره.
به این صورت که یک تگ input در کد html قرار دادم با انتخاب یک فایل یک div به کد html اضافه می شد و با استفاده از ajax.$ اون فایل رو post می کردم به کد سمت سرور و با استفاده از قابلیت های ajax داخل اون div اضافه شده برای این فایل یک پروگرس بار نشون میدادم ولی خب نه پروگرس بار کار کرد.
برای نمونه این کد رو ببینید :
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Upload and Resize with jQuery and PHP - Demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/progress-circle.js"></script>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link href="style/circle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function(){
var uploadC = 1;
var action = "./up.php";
var fd = new FormData();
var input = $("#clickable");
$('#clickable').on('change', function(){
fd.append('file', $("#clickable")[0].files[0]);
$.ajax({
url:action,
async:false,
cache: false,
data : fd,
contentType: false,
processData: false,
type: 'POST',
beforeSend : function(){
},
xhr: function() {
var req = $.ajaxSettings.xhr();
if (req) {
req.upload.addEventListener('progress',function(ev ){
//Display progress Percentage
progress = Math.round(ev.loaded * 100 / ev.total);
console.log(progress);
}, false);
}
return req;
},
success:function(result){
$("div").html(result);
}
});
});
});
</script>
</head>
<body>
<input type="file" id="clickable">
<div id="pwarp">
</div>
</body>
</html>
فایل آپلود میشه ولی داخل کنسول درصد آپلود شده رو ندارم و اینکه این کد در مرورگر های قدیمی مثل IE 8 کار نمیکنه
ممنون
دوستان من دنبال یه کد آپلود فایل با jquery بودم که بشه اونو سفارشی کرد (برای سایتم میخاستم) پلاگین های آماده زیادی هست ولی خب سفارشی کردن اونا تا جایی که من میدونم و میخاستم این کارو بکنم خیلی سخت بود در ضمن پلاگینی که در همه مرورگر ها جواب بده پیدا نکردم .
خلاصه اینکه از دوستان کمک میخام راهنمایی کنن چه کار کنم.
ویژگی هایی که من میخاستم کد مورد نظر داشته باشه :
۱- progress bar که در همه مرورگر های کار کنه
۲- امکان آپلود چند فایل به صورت جداگانه و هم زمان : یعنی وقتی کاربر فایلی رو انتخاب میکنه آپلود شروع بشه و پروگرس بار روند اونو نشون بده و هم زمان با اون کاربر بتونه فایل دیگه ای رو انتخاب کنه و یه پروگرس بار دیگه هم نشون داده بشه و این دوتا فایل به صورت هم زمان روند آپلودشون نشون داده بشه
۳- سفارشی بشه : بشه قبل و بعد هر آپلود یه سری اطلاعات نشون کاربر بدیم
۴- استایلش هم قابل تغییر باشه
من خودم شرو کردم به نوشتن یک کد آپلود ولی اصلا خوب پیش نمیره.
به این صورت که یک تگ input در کد html قرار دادم با انتخاب یک فایل یک div به کد html اضافه می شد و با استفاده از ajax.$ اون فایل رو post می کردم به کد سمت سرور و با استفاده از قابلیت های ajax داخل اون div اضافه شده برای این فایل یک پروگرس بار نشون میدادم ولی خب نه پروگرس بار کار کرد.
برای نمونه این کد رو ببینید :
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Upload and Resize with jQuery and PHP - Demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/progress-circle.js"></script>
<link href="style/style.css" rel="stylesheet" type="text/css">
<link href="style/circle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function(){
var uploadC = 1;
var action = "./up.php";
var fd = new FormData();
var input = $("#clickable");
$('#clickable').on('change', function(){
fd.append('file', $("#clickable")[0].files[0]);
$.ajax({
url:action,
async:false,
cache: false,
data : fd,
contentType: false,
processData: false,
type: 'POST',
beforeSend : function(){
},
xhr: function() {
var req = $.ajaxSettings.xhr();
if (req) {
req.upload.addEventListener('progress',function(ev ){
//Display progress Percentage
progress = Math.round(ev.loaded * 100 / ev.total);
console.log(progress);
}, false);
}
return req;
},
success:function(result){
$("div").html(result);
}
});
});
});
</script>
</head>
<body>
<input type="file" id="clickable">
<div id="pwarp">
</div>
</body>
</html>
فایل آپلود میشه ولی داخل کنسول درصد آپلود شده رو ندارم و اینکه این کد در مرورگر های قدیمی مثل IE 8 کار نمیکنه
ممنون