Komentar: Di bawah ini kami menggunakan API file fitur baru HTML 5 untuk mengunggah file dan menampilkan persentase kemajuan file unggahan. Niatnya seperti ini: Ketika file dipilih, informasi file saat ini ditampilkan.
Di sini kami menggabungkan ASP.NET MVC sebagai server, dan Anda juga dapat menggunakan bahasa server lainnya. Mari kita lihat HTML dari cuplikan ini:@Using (html.beginform ("unggah", "home", formmethod.post, {enctype = "multipart/form-data" baru,})))
{
<div>
<label untuk = "file">
Impload Image: </LABEL>
<input type = "file" multiple = "ganda" onchange = "fileDelected ();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<input type = "tombol" value = "unggah gambar" />
</div>
<div>
</div>
}
JavaScript terkait adalah sebagai berikut:
function file yang diseleksi () {
var file = document.geteLementById ('filetouplead'). File [0];
if (file) {
var filesize = 0;
if (file.size> 1024 * 1024)
filesize = (math.round (file.size * 100 / (1024 * 1024)) / 100) .toString () + 'mb';
kalau tidak
filesize = (math.round (file.size * 100 /1024) / 100) .toString () + 'kb';
document.geteLementById ('fileName'). innerHtml = 'name:' + file.name;
document.geteLementById ('filesize'). innerHtml = 'size:' + filessize;
document.geteLementById ('filetype'). innerHtml = 'type:' + file.type;
}
}
function uploadFile () {
var fd = formdata baru ();
fd.append ("filetoupload", document.geteLementById ('filetoupload'). File [0]);
var xhr = xmlhttpRequest baru ();
xhr.upload.addeventListener ("progress", unggahprogress, false);
xhr.addeventListener ("muat", unggah komplit, false);
xhr.addeventlistener ("error", unggah yang diperoleh, false);
xhr.addeventlistener ("abort", unggahcanceled, false);
xhr.open ("post", "home/unggah");
xhr.send (fd);
}
function unggahProgress (evt) {
if (evt.lengthcomputable) {
var persencomplete = math.round (evt.Loaded * 100 /evt.total);
document.geteLementById ('progressNumber'). innerHtml = persen complete.tostring () + '%';
}
kalau tidak {
document.geteLementById ('progressNumber'). innerHtml = 'tidak dapat menghitung';
}
}
function uploadComplete (evt) {
/ * Acara ini dinaikkan saat server mengirim kembali respons */
alert (evt.target.Responsetext);
}
function uploadfailed (evt) {
peringatan ("Ada kesalahan yang mencoba mengunggah file.");
}
function unggahcanceled (evt) {
Peringatan ("Unggah telah dibatalkan oleh pengguna atau browser menjatuhkan koneksi.");
}
Di atas adalah JavaScript asli, yang mengeksekusi fungsi yang dipilih file dalam acara Onchange, dan menjalankan fungsi unggahan dalam tombol klik. Di sini, gunakan XMLHTTPREQUEST untuk mengimplementasikan file unggahan AJAX. Perhatikan bahwa kode dapat bekerja di Firefox 14. IE 9 saat ini tidak mendukung file API, sehingga Anda dapat berpartisipasi di sini. Kode sisi server sangat sederhana:
Homecontroller kelas publik: pengontrol
{
Indeks ActionResult Publik ()
{
return view ();
}
/// <summary>
/// mengunggah file yang ditentukan.
/// </summary>
/// <param> File. </param>
/// <Returns> ActionResult </returns>
[Httppost]
unggahan aksi publik (httppostedfilebase [] filetoupload)
{
foreach (file httppostedfilebase di filetouppload)
{
string path = system.io.path.combine (server.mappath ("~/app_data"), system.io.path.getFileName (file.filename));
file.saveas (path);
}
Viewbag.message = "file (s) diunggah dengan sukses";
return redirecttoaction ("index");
}
}
Penulis: Petter Liu