jquery melaksanakan fungsi pratonton setempat sebelum upload_jquery imej

Contoh dalam artikel ini berkongsi dengan anda kod khusus jquery untuk pratonton imej sebelum memuat naik untuk rujukan anda Kandungan khusus adalah seperti berikut
Ada masalah kecil sebelum pengenalan Apabila saya tidak dapat mencari pratonton gambar, sebab mengapa gambar tidak keluar ternyata menjadi laluan gambar! ! ! Apa yang saya terus tulis ialah laluan tempatan imej, yang tidak berguna. Pergi terus ke kod.

bahagian html:

Salin kod Kod adalah seperti berikut:

Acara input:fail adalah daripada jenis muat naik
Nilai atribut yang lebih biasa digunakan adalah seperti berikut:
terima: menunjukkan jenis MIME fail yang boleh dipilih Pelbagai jenis MIME dipisahkan oleh jenis MIME yang biasa digunakan ditunjukkan dalam jadual di bawah.
Untuk menyokong semua format imej, tulis sahaja *.
berbilang: Sama ada berbilang fail boleh dipilih Apabila terdapat berbilang fail, nilainya ialah laluan maya bagi fail pertama

Gaya input:fail tidak berubah, jadi jika anda ingin menukar gayanya, sembunyikannya dahulu. paparan:tiada;

Bahagian CSS:
Oleh kerana kami membuat avatar bulat, kami menentukan gaya imej terlebih dahulu.

 #pic{
      width:100px;
      height:100px;
      border-radius:50% ;
      margin:20px auto;
      cursor: pointer;
    }

Bahagian jQuery:

 $(function() {
   $("#pic").click(function () {
     $("#upload").click();               //隐藏了input:file样式后，点击头像就可以本地上传
      $("#upload").on("change",function(){
        var objUrl = getObjectURL(this.files[0]) ;  //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
          $("#pic").attr("src", objUrl) ;      //将图片路径存入src中，显示出图片
        }
     });
   });
 });

 //建立一個可存取到該file的url
 function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL!=undefined) { // basic
     url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) { // mozilla(firefox)
     url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { // webkit or chrome
     url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
 }

Keputusan larian adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk mempelajari program jquery.