php+WebUploader图片批量上传
一.webuploader
webuploader主要用来做文件的上传，支持批量上传和图片预览，图片预览是将图片生成base64数据直接在标签中使用，所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍，可以上webuploader的官方网址看，我一直认为，看官网文档是学习最直接的途径。 webuploader官方网站，顺带一提，webuploader是由Baidu Fex Team团队进行维护的。
二. webuploader上传原理
1. PHP+HTML表单上传文件
在讲这个之前，需要先了解一下php的文件上传方式，上传分两个部分
先通过html创建
<form>表单，在表单中添加
<input type='file' name='xxx'>
的文件上传标签，点击上传的submit 按钮之后，就可以将文件上传到服务器了。
到了服务器端，接收到的上传文件会被存储在php指定的临时文件夹中，利用PHP的内置函数
move_uploaded_file()，就可以将临时文件移动到你想要的目标文件夹中，这个过程可以对文件进行改名、做大小判断是否符合条件等，这样上传就完成了。
完整的php表单上传案例，可以看w3school的这篇文章，这里就不累赘了。PHP+HTML表单上传文件
2. webuploader上传原理
使用php+html表单上传可以完成文件的上传工作，但是有缺点，
上传文件时必须提交整个页面，这样页面会被刷新
上传图片是没办法进行图片预览，所以有时候上传错了图片也要等到图片真正上传上去之后刷新了页面才知道。
webuploader解决了这两个问题，webuploader使用ajax技术提交表单，上传的时候不需要提交页面，可以利用事件监听机制监听上传的结果，在页面中做出反馈，而且还能做图片预览。使用webuploader上传图片，也只需要几步：
前台HTML页面配置webuploader
后台服务器PHP页面接受webuploader的上传图片，然后进行处理。
后台处理完图片返回json数据的结果给前台
前台接收json数据后作出反馈。
这里说一点，后台PHP接收和处理图片其实和PHP+HTML表单上传基本是一样的。
三. webuploader的配置和使用
所有的配置参数和使用方法都可以查看官方文件。webuploader官方网站，在webuploader github仓库中有一些example案例可以参考。example
我的运行环境：php5.6+nginx+macOS
我的文件夹的目录
index.php
upload_img.php
mywebupload.js
webuploader/
uploads/
1. 前台HTML页面配置webupload
主要做以下几个步骤：
引入webuploader的相关js和css包
创建HTML标签
创建一个js文件，初始化webuploader 以下是整个页面代码，webuploader文件夹是在github上整个搬运下来的，然后我还用到了jquery来增强页面的体验。
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>WebUploader演示</title> <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" /> <link rel="shortcut icon" href="favicon.ico"> </head> <body> <div id="imgPicker">选择文件</div> <button class="btn btn-primary btn-upload">上传</button> <div></div> <div></div> <!--jquery 1.12--> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!--bootstrap核心js文件--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> <!--webuploader js--> <!--<script type="text/javascript" src="static/jquery.js"></script>--> <script type="text/javascript" src="webuploader/dist/webuploader.min.js"></script> <script type="text/javascript" src="mywebupload.js"></script> </body> </html>
mywebupload.js
$(function(){
/*
* 配置webuploader
*/
var imgUploader = WebUploader.create({
fileVal: 'img', // 相当于input标签的name属性，用于后台PHP识别接收上传文件的field
swf: './webuploader/dist/Uploader.swf', // swf文件路径
server: './upload_img.php', // 文件接收服务端。
fileNumLimit: 10, // 上传文件的限制
pick: {
id : '#imgPicker', //
multiple : true // 是否支持多文件上传
},
// 只允许上传图片
accept: {
title: 'Only Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
},
auto: false, // 添加文件后是否自动上传上去，我设置了false，后面我会利用自己的上传按钮上传
resize: false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
});
/*
* 设置上传按钮的单击事件
*/
$('.btn-upload').click(function(){
imgUploader.upload(); // webuploader内置的upload函数，启动webuploader的上传
});
/*
* 配置webuploader的事件监听
*/
// 当图片文件被添加到上传队列中
imgUploader.on('fileQueued', function (file) {
addImgThumb(file);
});
// 生产图片预览
function addImgThumb(file){
imgUploader.makeThumb(file, function(error, ret){
if(!error){
img = '<img alt="" src="' + ret + '" />';
$('.img-thumb').append(img);
}else{
console.log('making img error');
}
},1,1);
}
imgUploader.on('uploadSuccess'), function(file, response){
// response 是后台upload_img.php返回的数据
if(response.success){
$('.result').append('<p>' + file.name + '上传成功</p>')
}else{
$('.result').append('<p>' + response.message + '</p>')
}
});
})2. 后台PHP页面处理上传文件
这里要注意两点：
后台处理的php文件文件名必须跟webuploader配置的时候一样。
上传的文件夹记得设置好权限，linux可以利用chmod来修改文件夹权限，否则会导致上传失败。
我这里的处理方式比较简单，有什么问题可以给我留言。
upload_img.php
<?php
$field = 'img'; // 对应webupload里设置的fileVal
$savePath = './uploads/'; // 这里注意设置uploads文件夹的权限
$saveName = time() . uniqid() . '_' . $_FILES[$field]['name']; // 为文件重命名
$fullName = $savePath . $saveName;
if (file_exists($fullName)) {
$result = [
'success'=>false,
'message'=>'相同文件名的文件已经存在'
];
}else{
move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
$result = ['success'=>true, 'fullName'=>$fullName];
}
return json_encode($result); // 将结果打包成json格式返回
?>以上就是webuploader的全部内容，更多webuploader的参数配置和事件可以参考webuploader的官方网址。希望大家多多留言交流指正。
更多PHP相关技术文章，请访问PHP教程栏目进行学习！
Atas ialah kandungan terperinci php+WebUploader图片批量上传. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1379
52
Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka
Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP
Dec 20, 2024 am 11:31 AM
Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c
7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini
Nov 13, 2024 am 09:42 AM
Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API.
Apr 05, 2025 am 12:04 AM
JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,
Program PHP untuk mengira vokal dalam rentetan
Feb 07, 2025 pm 12:12 PM
Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6
Terangkan pengikatan statik lewat dalam php (statik: :).
Apr 03, 2025 am 12:04 AM
Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.
Apakah kaedah Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan?
Apr 03, 2025 am 12:03 AM
Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.
