网站首页杂项

HTML Formdata 文件上传

发布时间：2019-04-16编辑：Cary.He

本篇教程探讨了HTML5 Formdata完成图片上传，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

 

XMLHttpRequest 是一个浏览器接口，通过它，我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。它有一些有趣的特性，比如 Formdata 。 Formdata是XMLHttpRequest 的一个对象利用它我们可以实现提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。

· 首先看一下formData的基本用法：FormData对象
FormData对象可以把所有表单元素的name与value组成一个queryString，提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可：

var form = document.getElementById("form1");var fd = new FormData(form);

· 下面是HTML结构

        <div class="flex1 changeHeadimg-imgdiv">

            <div class="flex3"><div>当前头像</div></div>

            <div class="flex4">

                <img :src="src" alt="">

            </div>

        </div>

        <div class="flex2 changeHeadimg-formdiv">

            <form name="form1" id="form1">  

                <input type="file" name="photo" id="photo">

                <div @click="gogogo" >提交</div>

            </form>

 

        </div>




*下面是点击事件触发的函数

                 gogogo:function(){

                    var form=document.getElementById("form1");

                    var fd =new FormData(form);//新建FormData对象，并把form表单的数据作为参数

                    $.ajax({

                         url: "http://127.0.0.1/bishegogogo/CI/img/test", //注意此处我使用了PHP CI框架 。项目名bishegogogo，img为CI框架下的控制器，test为控制器下的方法

                         type: "POST", //提交方式 我使用 post提交

                         data: fd, //传输数据

                         processData: false,  // 告诉jQuery不要去处理发送的数据

                         contentType: false,   // 告诉jQuery不要去设置Content-Type请求头

                         success: function(response,status,xhr);

                            var json=$.parseJSON(response);

                            var imgsrc = 'http://127.0.0.1/img/TX/' + json['photo'];//这里请注意引用

                            $("img").attr("src",imgsrc);//jquery更新 imgsrc

                         }

                    });

                    return false;

                }

至此完成了 1.上传图片 2.保存在本地服务器 3.显示

· php代码

<?phpclass img extends CI_Controller { //文件名img.php 即CI框架下的 控制器

 

    public function test(){  //function test() 即 控制器下的方法

        $localurl = '../../img/TX/';//第二个智商欠费

        $filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));//为图片重命名

        $imgurl = $localurl.$filename;//php拼接字符串始用 ‘ . ’ 等同于JS的  ‘ + ’

        $response = array();

        if(move_uploaded_file($_FILES['photo']['tmp_name'], $imgurl)){//move_uploaded_file函数

            $response['isSuccess'] = true;

            $response['photo'] = $filename;

        }else{  

            $response['isSuccess'] = false;  

        }  

        echo json_encode($response);

    }

}?>

move_uploaded_file函数
有两个参数第一个参数需要指定将要移动的图片，第二个参数给定目标目录
也就是说从文件的临时存放目录，存到真正需要存储的目录