JavaScript

超轻量级php框架startmvc

JS+php后台实现文件上传功能详解

更新时间:2020-08-16 17:12:01 作者:startmvc
本文实例讲述了JS+php后台实现文件上传功能。分享给大家供大家参考,具体如下:一、利用

本文实例讲述了JS+php后台实现文件上传功能。分享给大家供大家参考,具体如下:

一、利用 FormData 对象形式上传

FormData 是 XMLHttpRequest 2 的产物,兼容 IE10+。

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。

使用 FormData 对象

1.取得form对象,作为参数传入到FormData对象

html:


<form name="form1" id="form1">
 <input type="text" name="name" value="fdipzone">
 <input type="text" name="gender" value="male">
</form>

js:


var form = document.getElementById('form1');
var formdata = new FormData(form);

2.创建一个FormData空对象,然后使用append方法添加key/value


var formdata = new FormData();
formdata.append('name','fdipzone');
formdata.append('gender','male');

使用FormData提交表单及上传文件实例:

实例1

一般项目中使用的点击上传文件的按钮跟 <input type="file"/> 默认样式是不一样的,我们得自定义。方法是,自己写一个<button> 按钮,然后再写一个 <input type="file"/>(这个要隐藏,太难看),点击 <button> 的时候出发 <input type="file"/> 的 click 事件。

HTML:


<input type="file"
 :style="{display: 'none'}"
 ref="input" @change="selectedFile"
/>
<button @click="upload">上传</button>

JS:


methods: {
 triggerSelect () {
 this.$refs.input.click()
 },
 selectedFile (e) {
 console.log(e.target.files[0])
 //根据项目需求做具体处理,比如说获取文件名
 },
 async upload () {
 //如果不需要用到上传后的返回值可以把 async...await 语法去掉
 let files = this.$refs.input.files;
 if(files.length > 0) {
 let form = new FormData();
 form.append('file', files[0])
 let data = await new Promise((resolve, reject) => {
 axios({
 url: '',
 method: 'post',
 data: form
 })
 .then(res => {
 resolve(res)
 })
 .catch(err => {
 reject(err)
 })
 })
 }
 }
}

实例2


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title> FormData Demo </title>
 </head>
 <body>
 <form name="form1" id="form1">
 <p>name:<input type="text" name="name" ></p>
 <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>
 <p>photo:<input type="file" name="photo" id="photo"></p>
 <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
 </form>
 <div id="result"></div>
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
 function fsubmit(){
 var data = new FormData($('#form1')[0]);
 $.ajax({
 url: 'server.php',
 type: 'POST',
 data: data,
 dataType: 'JSON',
 cache: false,
 processData: false, //不处理发送的数据,因为data值是FormData对象,不需要对数据做处理
 contentType: false //不设置Content-type请求头
 }).done(function(ret){
 if(ret['isSuccess']){
 var result = '';
 result += 'name=' + ret['name'] + '<br>';
 result += 'gender=' + ret['gender'] + '<br>';
 result += '<img src="' + ret['photo'] + '" width="100">';
 $('#result').html(result);
 }else{
 alert('提交失敗');
 }
 });
 return false;
 }
 </script>
</body>
</html>

server.php


<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$response = array();
if(move_uploaded_file($_FILES['photo']['tmp_name'], $filename)){
 $response['isSuccess'] = true;
 $response['name'] = $name;
 $response['gender'] = $gender;
 $response['photo'] = $filename;
}else{
 $response['isSuccess'] = false;
}
echo json_encode($response);
?>

带显示图片的上传图片


// -------- 将以base64的图片url数据转换为Blob --------
function convertBase64UrlToBlob(urlData, filetype){
 //去掉url的头,并转换为byte
 var bytes = window.atob(urlData.split(',')[1]);
 //处理异常,将ascii码小于0的转换为大于0
 var ab = new ArrayBuffer(bytes.length);
 var ia = new Uint8Array(ab);
 var i;
 for (i = 0; i < bytes.length; i++) {
 ia[i] = bytes.charCodeAt(i);
 }
 return new Blob([ab], {type : filetype});
}
$input.on('change', function (e) {
 var input = $input.get(0);
 var files = input.files || [];
 if (files.length === 0) {
 return;
 }
 console.log('选中 ' + files.length + ' 个文件');
 // 遍历选中的文件,预览、上传
 $.each(files, function (key, file) {
 var filename = file.name || '';
 var fileType = file.type || '';
 var reader = new FileReader();
 // onload事件
 reader.onload = function (e) {
 var base64 = e.target.result || this.result;
 var formData = new FormData();
 formData.append("upload_file", convertBase64UrlToBlob(base64, fileType), filename);
 var xhr = new XMLHttpRequest();
 // 开始上传
 xhr.open('POST', uploadImgUrl, true);
 // 发送数据
 xhr.send(formData);
 });
 reader.readAsDataURL(file);
 });
});

二、base64 字符串方式上传图片

base64 在线转换网站:http://tools.jb51.net/transcoding/img2base64

DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 HTTP 请求,加快小图像的加载时间。 经过Base64 编码后的文件体积一般比源文件大 30% 左右。

Base64 在CSS中的使用:


.box{
 background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}

Base64 在HTML中的使用:


<img src="data:image/jpg;base64,/9j/4QMZR..." />

不推荐用base64,效率慢,消耗流量,占用空间。推荐使用把base64图片格式转换成FormData形式传递