التعليق: نستخدم أدناه واجهة برمجة تطبيقات ملف الميزة الجديدة لـ HTML 5 لتحميل الملفات وعرض النسبة المئوية لتقدم ملفات التحميل. القصد مثل هذا: عند تحديد ملف ، يتم عرض معلومات الملف الحالية.
نحن هنا نجمع بين ASP.NET MVC كخادم ، ويمكنك أيضًا استخدام لغات الخادم الأخرى. دعونا نلقي نظرة على HTML لهذا المقتطف:@using (html.beginform ("Topload" ، "Home" ، formmethod.post ، new {enctype = "multipart/form-data" ،})))
{
<viv>
<label for = "file">
تحميل الصورة: </label>
<type type = "file" multives = "multible" onChange = "fileselected () ؛" />
</div>
<viv>
</div>
<viv>
</div>
<viv>
</div>
<viv>
<type type = "button" value = "upload image" />
</div>
<viv>
</div>
}
JavaScript ذات الصلة على النحو التالي:
وظيفة FileSexted () {
var file = document.getElementById ('fileToupload'). files [0] ؛
if (ملف) {
var filedize = 0 ؛
if (file.size> 1024 * 1024)
filesize = (Math.Round (file.size * 100 / (1024 * 1024)) / 100) .ToString () + 'mb' ؛
آخر
filesize = (Math.Round (file.size * 100/1024) / 100) .ToString () + 'kb' ؛
document.getElementById ('filename'). innerhtml = 'name:' + file.name ؛
document.getElementById ('filesize'). innerhtml = 'size:' + filesize ؛
document.getElementById ('filetype'). innerhtml = 'type:' + file.type ؛
}
}
وظيفة exploadfile () {
var fd = new formData () ؛
fd.append ("fileToupload" ، document.getElementById ('fileToupload'). files [0]) ؛
var xhr = new xmlhttprequest () ؛
XHR.UPLOAD.AdDeventListener ("Progress" ، UploadProgress ، false) ؛
XHR.AdDeventListener ("load" ، uploadcomplete ، false) ؛
XHR.AdDeventListener ("خطأ" ، uploadfailed ، false) ؛
XHR.AddeventListener ("Abort" ، uploadCanceled ، false) ؛
XHR.Open ("post" ، "home/expload") ؛
XHR.SEND (FD) ؛
}
وظيفة exploadprogress (evt) {
if (evt.lengthComputable) {
var prexComplete = math.round (evt.loaded * 100 /evt.total) ؛
document.getElementById ('ProgressNumber'). innerhtml = ٪ complete.toString () + '٪' ؛
}
آخر {
document.getElementById ('ProgressNumber'). innerhtml = 'غير قادر على حساب' ؛
}
}
دالة uploadcomplete (evt) {
/ * يتم رفع هذا الحدث عندما يقوم الخادم بإعادة استجابة */
ALERT (EVT.Target.Responsetext) ؛
}
وظيفة exploadFailed (evt) {
التنبيه ("كان هناك خطأ في محاولة لتحميل الملف.") ؛
}
وظيفة exploadCanceled (evt) {
ALERT ("تم إلغاء التحميل من قبل المستخدم أو أسقط المتصفح الاتصال.") ؛
}
ما ورد أعلاه هو JavaScript الأصلي ، الذي ينفذ وظيفة Files -Elexcted في حدث OnChange ، ويقوم بتنفيذ وظيفة التحميل في زر النقر. هنا ، استخدم xmlhttprequest لتنفيذ ملف تحميل ajax. لاحظ أن الكود يمكن أن يعمل في Firefox 14. أي 9 لا يدعم حاليًا واجهة برمجة تطبيقات الملفات ، بحيث يمكنك المشاركة هنا. رمز جانب الخادم بسيط للغاية:
HomeController من الطبقة العامة: وحدة تحكم
{
مؤشر العمل العام ()
{
إرجاع عرض () ؛
}
/// <summary>
/// تحميل الملفات المحددة.
/// </summary>
/// <Param> الملفات. </param>
/// <returns> ActionResult </rovens>
[httppost]
تحميل العمل العام (httppostedfilebase [] filetoupload)
{
foreach (ملف httppostedfilebase في filetoupload)
{
string path = system.io.path.combine (server.mappath ("~/app_data") ، system.io.path.getFilename (file.filename)) ؛
file.saveas (path) ؛
}
viewBag.message = "file (s) تم تحميله بنجاح" ؛
إعادة التوجيه ("الفهرس") ؛
}
}
المؤلف: بيتر ليو