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 相关文章推荐
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
8个有意思的JavaScript面试题
Jul 30 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
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
js下弹出窗口的变通
2007/04/18 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
python编写分类决策树的代码
2017/12/21 Python
python中的字符串内部换行方法
2018/07/19 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python函数式编程实例详解
2020/01/17 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
2014年师德承诺书
2014/05/23 职场文书
网络研修随笔感言
2015/11/18 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
CSS完成视差滚动效果
2021/04/27 HTML / CSS
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
在项目中使用redis做缓存的一些思路
2021/09/14 Redis