php+html5实现无刷新图片上传教程，
php+html5实现无刷新图片上传教程，
本篇向大家介绍一种全新的上传图片的方式，利用html5的FileReader读取图片文件，然后将数据传输到服务器再使用PHP进行处理。实现过程如下（带图片预览功能）
前端html代码 upload,html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上传</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
.upload{
width:300px;
height:200px;
position:relative;
}
.upload input[type='file']{
position:absolute;
width:70px;
top:0;
left:0;
z-index:10;
opacity:0;
filter:alpha(opacity=0);
}
.upload input.selbutton{
width:70px;
height:30px;
background:#cf001b;
color:#FFF;
font-size:14px;
position:absolute;
top:0;left:0;
z-index:9;
border:none;
cursor:pointer;
}
.upload input.upbutton{
width:70px;
height:30px;
background:#cf001b;
color:#FFF;
font-size:14px;
position:absolute;
top:50px;left:0;
z-index:10;
border:none;
cursor:pointer;
}
</style>
</head>
<body>
<div class='upload'>
<input type="file" name="file" />
<input type="button" name="selbutton" class="selbutton" value="选择文件" />
<input type="button" name="upbutton" class="upbutton" value="上传" />
</div>
<div class='previews'>
<img class="image_thumb lazy" src="/static/imghw/default1.png" data-src="#" alt="图片预览"/>
</div>
</body>
</html>
样式如下图
接下来是js代码
<script type="text/javascript">
$(".upbutton").click(function(){
//定义允许上传的图片格式 在前台就可以直接判断，不合法的格式将不会上传
var filetype = ['jpg','jpeg','png','gif'];
if($('.image').get(0).files){
fi = $('.image').get(0).files[0]; //得到文件信息
//判断文件格式是否是图片 如果不是图片则返回false
var fname = fi.name.split('.');
if(filetype.indexOf(fname[1].toLowerCase()) == -1){
alert('文件格式不支持');
return ;
}
//实例化h5的fileReader
var fr = new FileReader();
fr.readAsDataURL(fi); //以base64编码格式读取图片文件
fr.onload = function(frev){
pic = frev.target.result; //得到结果数据
//开始上传之前，预览图片
$('.image_thumb').attr('src',pic);
//使用ajax 利用post方式提交数据
$.post(
'handle.php',
{
message:pic,
filename:fname[0],
filetype:fname[1],
filesize:fi.size
},
function(data){
data = eval('('+data+')');
if(data.code == 1 || data.code == 2){
console.log('上传失败')
}else if(data.code == 0){
console.log('上传成功')
}
}
);
}
}
})
</script>
接下来是PHP处理代码 handle.php
$imgtype = array(
'gif'=>'gif',
'png'=>'png',
'jpg'=>'jpeg',
'jpeg'=>'jpeg'
); //图片类型在传输过程中对应的头信息
$message = $_POST['message']; //接收以base64编码的图片数据
$filename = $_POST['filename']; //接收文件名称
$ftype = $_POST['filetype']; //接收文件类型
//首先将头信息去掉，然后解码剩余的base64编码的数据
$message = base64_decode(substr($message,strlen('data:image/'.$imgtype[strtolower($ftype)].';base64,')));
$filename = $filename.".".$ftype;
$furl = "D:/now/";
//开始写文件
$file = fopen($furl.$filename,"w");
if(fwrite($file,$message) === false){
echo json_encode(array('code'=>1,'con'=>'failed'));
exit;
}
echo json_encode(array('code'=>0,'con'=>$filename));
选择文件然后点击上传的效果如下图
以上就是整个图片上传的代码。当然对于PHP的部分还有很多可以优化的地方，比如文件名部分，可以重命名，以保证相同文件名上传以后的文件名是不同的等等。这种上传方式我也是刚开始使用，当初是受Node.js做上传的的启发，然后尝试着应用于PHP，没想到还真能上传成功。
希望大家也可以按照此方法实现图片上传。
您可能感兴趣的文章:
- PHP图片上传类带图片显示
- 简单的PHP图片上传程序
- php ajax无刷新上传图片实例代码
- php 图片上传类代码
- thinkphp实现图片上传功能分享
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
- ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
- 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
1381
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.
