Muat naik fail tanpa memuat semula dan mengembalikan nilai tersuai

Artikel ini berkongsi secara ringkas dengan anda kaedah dan contoh cara menyelesaikan masalah memuat naik fail tanpa menyegarkan dalam projek peribadi Rakan yang memerlukan boleh merujuknya.

Saya menghadapi masalah seperti itu semasa proses pembangunan hari ini: Excel perlu dimuat naik ke pelayan untuk menghurai, tetapi apabila dokumen itu tidak sesuai, saya berharap halaman itu tidak akan dimuat semula untuk menggesa pengguna bahawa dokumen tidak sesuai. Setelah berfikir panjang, saya dapati banyak maklumat di Internet dan akhirnya berjaya dalam percubaan saya akan berkongsi kaedah pemprosesan di sini:

Pertama sekali, izinkan saya bercakap tentang idea pemprosesan: tambahkan iframe tersembunyi pada halaman dan tetapkan atribut sasaran borang Tetapkan kepada id iframe, supaya apabila borang diserahkan, fail excel akan dihantar ke latar belakang dalam bentuk aliran fail operasi boleh dilakukan selepas menerimanya di latar belakang Maklumat yang dikembalikan akan dipaparkan dalam iframe tanpa melompat Sebelum iframe Tetapkan kepada tersembunyi, jadi halaman tidak akan berubah, dan kemudian hantar kandungan ke kaedah JS dalam tetingkap utama untuk langkah seterusnya pemprosesan tersuai.

Kod halaman adalah seperti berikut:

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
　　<input id="excelFile" name="file" type="file" />
　　<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id=&#39;hiddenIFrame&#39; name=&#39;hiddenIFrame&#39; style="display:none;"></iframe>

Kod JS adalah seperti berikut (jqeury perlu diperkenalkan):

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

Kod latar belakang tidak akan diperkenalkan secara terperinci Sama seperti penyerahan tradisional, latar belakang akan memperoleh aliran fail dengan nama yang sama berdasarkan nilai nama komponen input (untuk contoh, nama komponen input dalam kod halaman di atas ialah fail, kemudian latar belakang diterima Ia adalah aliran fail bernama fail), dan anda boleh melakukan operasi tersuai selepas menerimanya.

Untuk lebih banyak tutorial berkaitan, sila lawati Tutorial JavaScript