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


Posted in Javascript onMarch 02, 2019

本文实例讲述了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.3water.com/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形式传递

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
浅析javascript 定时器
Dec 23 Javascript
Node.js中的流(Stream)介绍
Mar 30 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
JS事件绑定的常用方式实例总结
Mar 02 #Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 #Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 #Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 #Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 #Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 #Javascript
Angular7.2.7路由使用初体验
Mar 01 #Javascript
You might like
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Python如何读取、写入CSV数据
2020/07/28 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
新员工试用期自我鉴定
2014/04/17 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
大雁塔导游词
2015/02/04 职场文书
陕西导游词
2015/02/04 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书