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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python获取array中指定元素的示例
2019/11/26 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
自主招生自荐信指南
2014/02/04 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
高中生职业规划范文
2014/03/09 职场文书
学习十八大演讲稿
2014/09/15 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
html中两种获取标签内的值的方法
2022/06/16 jQuery