Rumah hujung hadapan web tutorial js jQuery的Web上传插件使用步骤详解

jQuery的Web上传插件使用步骤详解

Apr 26, 2018 am 11:33 AM
jquery web langkah

这次给大家带来jQuery的Web上传插件使用步骤详解,jQuery的Web上传插件使用注意事项有哪些,下面就是实战案例,一起来看一下。

测试例子以下是一个使用的简单例子:
这里我们采用了Uploadify包中自带的php测试脚本作为上传的处理,所以这里安装了wamp作为php的测试环境,在php的网站根目录中,解压上面下载好的Uploadify文件,并创建一个文件上传保存的目录,这里我们在Uploadify的解压目录中创建到了uploads作为文件保存目录。

创建uploadify_test.php文件,添加如下内容:

<html>
<head>
  <link href="uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
  <script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script> 
  <style type="text/css">
    #custom-demo .uploadifyQueueItem {
     background-color: #FFFFFF;
     border: none;
     border-bottom: 1px solid #E5E5E5;
     font: 11px Verdana, Geneva, sans-serif;
     height: 50px;
     margin-top: 0;
     padding: 10px;
     width: 350px;
    }
    #custom-demo .uploadifyError {
     background-color: #FDE5DD !important;
     border: none !important;
     border-bottom: 1px solid #FBCBBC !important;
    }
    #custom-demo .uploadifyQueueItem .cancel {
     float: right;
    }
    #custom-demo .uploadifyQueue .completed {
     color: #C5C5C5;
    }
    #custom-demo .uploadifyProgress {
     background-color: #E5E5E5;
     margin-top: 10px;
     width: 100%;
    }
    #custom-demo .uploadifyProgressBar {
     background-color: #0099FF;
     height: 3px;
     width: 1px;
    }
    #custom-demo #custom-queue {
     border: 1px solid #E5E5E5;
     height: 213px;
     margin-bottom: 10px;
     width: 370px;
    }        
  </style>  
  <script type="text/javascript">
    $(function() {
    $('#custom_file_upload').uploadify({
       'uploader'    : 'uploadify-v2.1.4/uploadify.swf',
       'script'     : 'uploadify-v2.1.4/uploadify.php',
       'cancelImg'   : 'uploadify-v2.1.4/cancel.png',
       'folder'     : 'uploadify-v2.1.4/uploads',
       'multi'     : true,
       'auto'      : true,
       'fileExt'    : '*.jpg;*.gif;*.png;*.txt',
       'fileDesc'    : 'Image Files (.JPG, .GIF, .PNG)',
       'queueID'    : 'custom-queue',
       'queueSizeLimit' : 3,
       'simUploadLimit' : 3,
       'sizeLimit'  : 1024000,
       'removeCompleted': false,
       'onSelectOnce'  : function(event,data) {
         $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
        },
       'onAllComplete' : function(event,data) {
         $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
        }
      });        
    });
  </script>
</head>
<body>
  <p id="custom-demo" class="demo">
     <h2>Custom Demo</h2>
    <p>Uploadify is fully customizable. Here is an implementation with multiple files, auto uploads, limited file types, limited queue size, and custom onSelectOnce and onAllComplete functions.</p>
    <p class="demo-box">
      <p id="status-message">Select some files to upload:</p>
      <p id="custom-queue"></p>
      <input id="custom_file_upload" type="file" name="Filedata" />    
    </p>
  </p>
</body>
</html>
Salin selepas log masuk

Uploadify插件提示$(“#id”).uploadify is not a function错误可能原因swfobject.js和jquery.uploadify.v2.1.4.min.js由于使用到了jquery的API,所以这两个文件需要依赖于jquery-1.4.2.min.js这个文件。
正常情况下需要引入如下几个js文件:

<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js" ></script> 
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" ></script>
Salin selepas log masuk

而在项目中已经存在了另外一个jquery的JS文件,导致文件冲突。而另外的一个jQuery文件的引入位置位于上面三个js文件引入位置的后面,此时项目中使用的是原本已经存在的jquery的JS文件,导致在加载jquery.uploadify.v2.1.4.min.js文件时还没有可用的jquery相关函数的定义,才会报这个错误。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Uploadify插件做出带进度条批量上传功能

jQuery EasyUI插件怎么创建菜单链接按钮

Atas ialah kandungan terperinci jQuery的Web上传插件使用步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menjadikan Peta Google sebagai peta lalai dalam iPhone Bagaimana untuk menjadikan Peta Google sebagai peta lalai dalam iPhone Apr 17, 2024 pm 07:34 PM

Peta lalai pada iPhone ialah Peta, pembekal geolokasi proprietari Apple. Walaupun peta semakin baik, ia tidak berfungsi dengan baik di luar Amerika Syarikat. Ia tiada apa-apa untuk ditawarkan berbanding Peta Google. Dalam artikel ini, kami membincangkan langkah yang boleh dilaksanakan untuk menggunakan Peta Google untuk menjadi peta lalai pada iPhone anda. Cara Menjadikan Peta Google Peta Lalai dalam iPhone Menetapkan Peta Google sebagai aplikasi peta lalai pada telefon anda adalah lebih mudah daripada yang anda fikirkan. Ikut langkah di bawah – Langkah prasyarat – Anda mesti memasang Gmail pada telefon anda. Langkah 1 – Buka AppStore. Langkah 2 – Cari “Gmail”. Langkah 3 – Klik di sebelah apl Gmail

ID Apple ini belum lagi digunakan dalam iTunes Store: Betulkan ID Apple ini belum lagi digunakan dalam iTunes Store: Betulkan Jun 10, 2024 pm 05:42 PM

Apabila log masuk ke iTunesStore menggunakan AppleID, ralat ini mengatakan "AppleID ini belum digunakan dalam iTunesStore" mungkin dilemparkan pada skrin. Tiada mesej ralat yang perlu dibimbangkan, anda boleh membetulkannya dengan mengikuti set penyelesaian ini. Betulkan 1 – Tukar Alamat Penghantaran Sebab utama gesaan ini muncul di iTunes Store ialah anda tidak mempunyai alamat yang betul dalam profil AppleID anda. Langkah 1 – Pertama, buka Tetapan iPhone pada iPhone anda. Langkah 2 – AppleID harus berada di atas semua tetapan lain. Jadi, bukalah. Langkah 3 – Setelah sampai, buka pilihan “Pembayaran & Penghantaran”. Langkah 4 – Sahkan akses anda menggunakan Face ID. langkah

Langkah-langkah untuk menaik taraf kepada versi terkini WeChat (Kuasai kaedah naik taraf kepada versi terkini WeChat dengan mudah) Langkah-langkah untuk menaik taraf kepada versi terkini WeChat (Kuasai kaedah naik taraf kepada versi terkini WeChat dengan mudah) Jun 01, 2024 pm 10:24 PM

WeChat ialah salah satu platform media sosial di China yang melancarkan versi baharu secara berterusan untuk memberikan pengalaman pengguna yang lebih baik. Menaik taraf WeChat kepada versi terkini adalah sangat penting untuk terus berhubung dengan keluarga dan rakan sekerja, untuk terus berhubung dengan rakan dan untuk mengikuti perkembangan terkini. 1. Fahami ciri dan penambahbaikan versi terkini adalah sangat penting untuk memahami ciri dan penambahbaikan versi terkini sebelum menaik taraf WeChat. Untuk peningkatan prestasi dan pembetulan pepijat, anda boleh mengetahui tentang pelbagai ciri baharu yang dibawa oleh versi baharu dengan menyemak nota kemas kini di tapak web atau gedung aplikasi rasmi WeChat. 2. Semak versi WeChat semasa Kami perlu menyemak versi WeChat yang sedang dipasang pada telefon bimbit sebelum menaik taraf WeChat. Klik untuk membuka aplikasi WeChat "Saya" dan kemudian pilih menu "Perihal" di mana anda boleh melihat nombor versi WeChat semasa. 3. Buka apl

Apl Shazam tidak berfungsi dalam iPhone: Betulkan Apl Shazam tidak berfungsi dalam iPhone: Betulkan Jun 08, 2024 pm 12:36 PM

Menghadapi masalah dengan apl Shazam pada iPhone? Shazam membantu anda mencari lagu dengan mendengarnya. Walau bagaimanapun, jika Shazam tidak berfungsi dengan betul atau tidak mengenali lagu itu, anda perlu menyelesaikannya secara manual. Membaiki apl Shazam tidak akan mengambil masa yang lama. Jadi, tanpa membuang masa lagi, ikut langkah di bawah untuk menyelesaikan isu dengan aplikasi Shazam. Betulkan 1 – Lumpuhkan Ciri Teks Tebal Teks tebal pada iPhone mungkin menjadi sebab mengapa Shazam tidak berfungsi dengan betul. Langkah 1 – Anda hanya boleh melakukan ini daripada tetapan iPhone anda. Jadi, bukalah. Langkah 2 - Seterusnya, buka tetapan "Paparan & Kecerahan" di sana. Langkah 3 - Jika anda mendapati bahawa "Teks Tebal" didayakan

Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya May 03, 2024 pm 09:16 PM

Ciri tangkapan skrin tidak berfungsi pada iPhone anda? Mengambil tangkapan skrin adalah sangat mudah kerana anda hanya perlu menahan butang Naik Kelantangan dan butang Kuasa pada masa yang sama untuk meraih skrin telefon anda. Walau bagaimanapun, terdapat cara lain untuk menangkap bingkai pada peranti. Betulkan 1 – Menggunakan Assistive Touch Ambil tangkapan skrin menggunakan ciri Assistive Touch. Langkah 1 – Pergi ke tetapan telefon anda. Langkah 2 – Seterusnya, ketik untuk membuka tetapan Kebolehcapaian. Langkah 3 – Buka tetapan Sentuh. Langkah 4 – Seterusnya, buka tetapan Assistive Touch. Langkah 5 – Hidupkan Sentuhan Bantu pada telefon anda. Langkah 6 – Buka “Sesuaikan Menu Teratas” untuk mengaksesnya. Langkah 7 – Sekarang anda hanya perlu memautkan mana-mana fungsi ini ke tangkapan skrin anda. Jadi klik pada yang pertama

Penjelasan terperinci tentang langkah-langkah untuk mendapatkan kebenaran pentadbir sistem Win11 Penjelasan terperinci tentang langkah-langkah untuk mendapatkan kebenaran pentadbir sistem Win11 Mar 08, 2024 pm 09:09 PM

Windows 11, sebagai sistem pengendalian terbaru yang dilancarkan oleh Microsoft, amat digemari oleh pengguna. Dalam proses menggunakan Windows 11, kadangkala kita perlu mendapatkan hak pentadbir sistem untuk melaksanakan beberapa operasi yang memerlukan kebenaran. Seterusnya, kami akan memperkenalkan secara terperinci langkah-langkah untuk mendapatkan hak pentadbir sistem dalam Windows 11. Langkah pertama ialah mengklik "Menu Mula". Anda boleh melihat ikon Windows di sudut kiri bawah Klik ikon untuk membuka "Menu Mula". Dalam langkah kedua, cari dan klik "

Isu zum Safari pada iPhone: Inilah penyelesaiannya Isu zum Safari pada iPhone: Inilah penyelesaiannya Apr 20, 2024 am 08:08 AM

Jika anda tidak mempunyai kawalan ke atas tahap zum dalam Safari, menyelesaikan sesuatu boleh menjadi sukar. Jadi jika Safari kelihatan dizum keluar, itu mungkin menjadi masalah untuk anda. Berikut ialah beberapa cara anda boleh membetulkan isu zum kecil ini dalam Safari. 1. Pembesaran kursor: Pilih "Paparan" > "Pembesaran kursor" dalam bar menu Safari. Ini akan menjadikan kursor lebih kelihatan pada skrin, menjadikannya lebih mudah untuk dikawal. 2. Gerakkan tetikus: Ini mungkin kedengaran mudah, tetapi kadangkala hanya menggerakkan tetikus ke lokasi lain pada skrin boleh mengembalikannya ke saiz normal secara automatik. 3. Gunakan Pintasan Papan Kekunci Betulkan 1 – Tetapkan Semula Tahap Zum Anda boleh mengawal tahap zum terus daripada penyemak imbas Safari. Langkah 1 – Apabila anda berada di Safari

Apl jam tiada dalam iPhone: Cara membetulkannya Apl jam tiada dalam iPhone: Cara membetulkannya May 03, 2024 pm 09:19 PM

Adakah apl jam hilang dari telefon anda? Tarikh dan masa masih akan dipaparkan pada bar status iPhone anda. Walau bagaimanapun, tanpa apl Jam, anda tidak akan dapat menggunakan jam dunia, jam randik, jam penggera dan banyak ciri lain. Oleh itu, membetulkan apl jam yang hilang hendaklah berada di bahagian atas senarai tugasan anda. Penyelesaian ini boleh membantu anda menyelesaikan isu ini. Betulkan 1 – Letakkan Apl Jam Jika anda tersilap mengalih keluar apl Jam daripada skrin utama anda, anda boleh meletakkan semula apl Jam pada tempatnya. Langkah 1 – Buka kunci iPhone anda dan mula meleret ke kiri sehingga anda mencapai halaman Pustaka Apl. Langkah 2 – Seterusnya, cari "jam" dalam kotak carian. Langkah 3 – Apabila anda melihat "Jam" di bawah dalam hasil carian, tekan dan tahan dan

See all articles