JS+php后台实现文件上传功能详解_javascript技巧_脚本之家

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

本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法。分享给大家供大家参考。具体分析如下:

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

使用FormData对象

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

一、利用 FormData 对象形式上传

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

使用FormData对象

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

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

1.创建一个FormData空对象,然后使用append方法添加key/value
复制代码 代码如下:var formdata = new
FormData(); 
formdata.append(‘name’,’fdipzone’); 
formdata.append(‘gender’,’male’);

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

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

2.取得form对象,作为参数传入到FormData对象
复制代码 代码如下:

使用 FormData 对象

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

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

 
 
 

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

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

复制代码 代码如下:var form =
document.getElementById(‘form1’); 
var formdata = new FormData(form);

var form = document.getElementById;var formdata = new FormData;
<!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>
  <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,
            contentType: false
        }).done(function(ret){
            if(ret['isSuccess']){
                var result = '';
                result += 'name=' + ret['name'] + '<br>';
                result += 'gender=' + ret['gender'] + '<br>';
                result += '<img src="'%20+%20ret['photo']%20%20+%20'" width="100">';
                $('#result').html(result);
            }else{
                alert('提交失敗');
            }
        });
        return false;
    }
  -->
  </script>

 </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>
 </body>
</html>

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

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

server.php

复制代码 代码如下: 
 
 

var formdata = new FormData();formdata.append;formdata.append;
<?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);
?>

 
 

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

图片 1

 
 

一般项目中使用的点击上传文件的按钮跟
默认样式是不一样的,我们得自定义。方法是,自己写一个 按钮,然后再写一个
,点击 的时候出发 的 click 事件。

FormData Demo

上传

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

   FormData Demo       function fsubmit(){ var data = new FormData; $.ajax({ url: 'server.php', type: 'POST', data: data, dataType: 'JSON', cache: false, processData: false, //&#19981;&#22788;&#29702;&#21457;&#36865;&#30340;&#25968;&#25454;&#65292;&#22240;&#20026;data&#20540;&#26159;FormData&#23545;&#35937;&#65292;&#19981;&#38656;&#35201;&#23545;&#25968;&#25454;&#20570;&#22788;&#29702; contentType: false //&#19981;&#35774;&#32622;Content-type&#35831;&#27714;&#22836; }).done{ if{ var result = ''; result += 'name=' + ret['name'] + '&lt;br&gt;'; result += 'gender=' + ret['gender'] + '&lt;br&gt;'; result += '&lt;img src="'%20+%20ret['photo']%20+%20'" width="100"&gt;'; $.html; }else{ alert; return false; } 

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

 
 

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

 
 

base64 在线转换网站:

 
  
  
   

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

 
       

Base64 在CSS中的使用:

name:

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

 
       

Base64 在HTML中的使用:

gender:male female

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

 
       

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript表单操作技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

photo:

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

 
       

 
   

 
    <> 
  

server.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); 
?>

运行效果如下图所示:

图片 2

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注