Pemalam jQuery mudah ajaxfileupload.js melaksanakan fail muat naik ajax example_jquery

Pemalam jQuery AjaxFileUpload dapat merealisasikan muat naik fail ajax Pemalam ini sangat mudah digunakan Mula-mula, pelajari cara menggunakan pemalam AjaxFileUpload dengan betul, dan kemudian ketahui tentang beberapa mesej dan penyelesaian ralat biasa.

Arahan penggunaan

Perlu menggunakan fail perpustakaan jQuery dan fail perpustakaan AjaxFileUpload

Contoh penggunaan

1, termasuk bahagian fail

Salin kod Kod adalah seperti berikut:

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0 c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. Bahagian HTML

Salin kod Kod adalah seperti berikut:

89b25275b4a8bb4532c41a2aa8161b05 11091c232b6ac165cead5133eec293a5 bec745fb82b804114c56a91be37fec35Upload65281c5ac262bf6d81768915a4a77ac0

Hanya tiga elemen diperlukan, ikon pemuatan dinamik, medan fail dan butang
Nota: Menggunakan pemalam AjaxFileUpload untuk memuat naik fail tidak memerlukan borang, seperti berikut:

cc59bea3adee72cab5ddc898397ea2f4 ...Kod html berkaitan... f5a47148e367a6035fd7a2faa965022e Kerana pemalam AjaxFileUpload akan menjana borang penyerahan borang secara automatik.

Untuk ID dan nama domain fail, parameter fileElementId pemalam ajaxFileUpload perlu mendapatkan ID domain fail Jika anda memproses operasi fail muat naik, anda perlu mengetahui nama domain fail untuk mendapatkan yang dimuat naik maklumat fail. Hubungan antara kedua-duanya mestilah jelas.

3, bahagian javascript

Penerangan parameter utama: 1. url mewakili laluan fail untuk memproses operasi muat naik fail Anda boleh menguji sama ada URL boleh diakses terus dalam penyemak imbas, seperti di atas: upload.php 2. fileElementId mewakili ID domain fail, seperti di atas: fileToUpload

3. Sama ada secureuri mendayakan penyerahan selamat, lalainya adalah palsu

4. dataType data, umumnya pilih json, ekologi asal javascript

<script type="text/javascript"> 
function ajaxFileUpload (){ 
loading();//动态加载小图标 
$.ajaxFileUpload ({ 
url :'upload.php', 
secureuri :false, 
fileElementId :'fileToUpload', 
dataType : 'json', 
success : function (data, status){ 
if(typeof(data.error) != 'undefined'){ 
if(data.error != ''){ 
alert(data.error); 
}else{ 
alert(data.msg); 
} 
} 
}, 
error: function (data, status, e){ 
alert(e); 
} 
}) 
return false; 
} 
function loading (){ 
$("#loading ").ajaxStart(function(){ 
$(this).show(); 
}).ajaxComplete(function(){ 
$(this).hide(); 
}); 
} 
</script> 

5. Fungsi pemprosesan selepas penyerahan berjaya

6. Ralat penyerahan kegagalan fungsi pemprosesan

Terdapat dua kaedah di atas, fungsi gesaan ikon kecil pemuatan dinamik memuat() dan fungsi $.ajaxFileUpload() muat naik fail, yang serupa dengan fungsi jQuery.ajax() yang kami gunakan Ia sangat mudah , dan saya telah meninggalkannya di sini PHP mengendalikan fail yang dimuat naik, dan semudah itu menggunakan pemalam jQuery AjaxFileUpload untuk melaksanakan fail ajax.

Pada masa yang sama, kita perlu mengetahui gesaan ralat yang berkaitan

1, SyntaxError: tiada; sebelum ralat pernyataan
Jika ralat ini berlaku, anda perlu menyemak sama ada laluan url boleh diakses

2, SyntaxError: ralat sintaks

Jika ralat ini berlaku, anda perlu menyemak sama ada terdapat ralat sintaks dalam fail PHP yang mengendalikan operasi penyerahan

3, SyntaxError: ralat id sifat tidak sah

Jika ralat ini berlaku, anda perlu menyemak sama ada ID atribut wujud

4, SyntaxError: tiada } dalam ralat ungkapan XML

Jika ralat ini berlaku, anda perlu menyemak sama ada nama domain fail itu konsisten atau tidak wujud

5, ralat tersuai lain

Anda boleh menggunakan pembolehubah $error untuk mencetak terus untuk menyemak sama ada setiap parameter adalah betul, yang jauh lebih mudah daripada gesaan ralat tidak sah di atas.

Menggunakan pemalam jQuery AjaxFileUpload untuk memuat naik fail tanpa menyegarkan adalah sangat praktikal Kerana kesederhanaan dan kemudahan penggunaannya, pemalam ini mempunyai bilangan pengguna yang paling ramai berbanding pemalam muat naik fail lain, jadi ia adalah. sangat disyorkan.

Halaman pemprosesan:

Komen tambahan daripada netizen lain:

Kod halaman:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  HttpFileCollection files = HttpContext.Current.Request.Files;


  //if (files[0].ContentLength > 5)
  //{
  // Response.Write("{");
  // Response.Write("msg:'" + files[0].FileName + "',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  files[0].SaveAs("d:/adw.jpg");
  Response.Write("{");
  Response.Write("msg:'a',");
  Response.Write("error:''");
  Response.Write("}");

  //Response.Write("{");
  //Response.Write("msg:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //Response.Write("}");
  Response.End();
 }
}

Salin kod

Kod adalah seperti berikut:

100db36a723c770d327fc0aef2ce13b1
443c3306f26bc91168d8c87ba55262e2
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
         a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

20037359df678438c3eba877c0e3a888
        4ec11beb6c39d0703d1751d203c17053
            fungsi ajaxFileUpload(){
$.ajaxFileUpload(
                                                        {
Url: 'update.do? Method = uploader', // perlu memaut ke alamat pelayan
secureuri:palsu,
FileElementid: 'Housemaps', // Atribut ID kotak pemilihan fail
dataType: 'xml',                             kejayaan: fungsi (data, status)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               $('#result').html('Berjaya ditambahkan');
                 },
Ralat: Fungsi (data, status, e) // setara                                                 {
                            $('#result').html('Tambah gagal');
                }
            }
                                                                                                                                                                                                                                          );
                                                                                                                                                                                                                                                    }
713e1e4451c8393b8e637e129c6b7b12
9c3bca370b5104690d9ef395f2c5f8d1 3c30aa6c4c72dd8ead30672a51b803a7
7179caff31ba7967e99850a4aa2c3bdf             bb12889be9509b7c88109280a7655834            5481467d3c96c8c4e590f8e17fa2b649
f5a47148e367a6035fd7a2faa965022e ca7204e18f1cb9313f7d7fb65b59687216b28748ea4df4d9c2150843fecfba68
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e



Kod pelayan:





Salin kod

Kod adalah seperti berikut:

Kelas awam UpdateAction memanjangkan DispatchAction {

    pemuat naik ActionForward awam (Pemetaan ActionMapping, borang ActionForm,
            Permintaan HttpServletRequest, respons HttpServletResponse) {
        UpFormForm upFormForm = (UpFormForm) borang;
        FormFile ff = upFormForm.getHouseMaps();
        cuba {
            InputStream ialah = ff.getInputStream();
            Fail fail = new File("D:/" ff.getFileName());            //指定文件存储的路径和文件名
            OutputStream os = baru FileOutputStream(fail);
           
            bait[] b = bait baharu[1024];
            int len ​​= 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            }
            os.close();
            is.close();
        } tangkapan (Pengecualian e) {
            e.printStackTrace();
           
        }
       
        kembalikan null;
    }
}