文档章节

利用FormData实现附件上传(实现上传图片显示)

PHer
 PHer
发布于 2014/06/23 16:56
字数 219
阅读 4091
收藏 9
<script type="text/javascript">
            function  creatXMLHttpRequest(){
                    var obj =null;
                                if(window.ActiveObject){
                                        obj = new ActiveObject("Microsoft.XMLHTTP");
                                }else{
                                        obj = new XMLHttpRequest();
                                }
                            return obj;
                }
    
            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            }
            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }
 </script> 

                <input type="file" id='myheads' name="myhead"  value="wenjian"/>
                <input type="button"  value="上传" onclick="uploaded();"/>
 </body>


上图为fileinfo的内容

立即显示被上传图片效果

            window.onload=function(){
                fileinfo=document.getElementById('myheads').files[0];
            //    console.log(fileinfo);
            }

            function uploaded(){
                    var xhr = creatXMLHttpRequest();
                    var fd = new FormData();
                    fd.append('myheads',fileinfo);
                    document.getElementById('img').src=window.URL.createObjectURL(fileinfo);
                    xhr.onreadystatechange=function(){
                            if(xhr.readyState==4 && xhr.status ==200){
                                    alert(xhr.responseText);
                            }
                    }
                    xhr.open('post','jsonupload.php');
                    xhr.send(fd);
            }

总结:HTML5新特性FormData

可以通过:

fileinfo=document.getElementById('myheads').files[0];来捕获客户端上传文件的信息

将需要上传的文件信息载入到FormData对象内部

fd.append('finfo',fileinfo);

然后通过 window.URL.createObjectURL(fileinfo);文件的url地址信息,二进制编码存在


© 著作权归作者所有

共有 人打赏支持
PHer
粉丝 4
博文 121
码字总数 38443
作品 0
成都
程序员
私信 提问
从实战中学前端:打造自己的html5文件上传插件

写在前面的废话:文件上传在web开发当中非常普遍,比如新闻图片、用户头像、商品图片等等,在html5几乎占据统治地位(但是依然有部分顽固派人士)的情况下,基于html5的文件上传也占了多数(...

有力量的神经病
2016/12/17
42
0
谈一次ajax上传图片到又拍云案例分享

之前图片上传到又拍云直接用的是HTTP FORM API ,今天项目中遇到AJAX上传后图片显示的效果,回过头来想想,跟HTTP FORM API表单提交的过程基本类似,作如下分享,希望有个帮助。 //封装好的公...

白狼栈
2016/03/13
246
0
多种上传图片的方法

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL 一个如下所示的发布框,经常会出现在各种微博、社区、论坛站点上,这类发布形式虽然...

筱飞
2016/06/07
74
0
两种文件上传的实现-Ajax上传和form+iframe

前言 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级简单了。HTML5支持多图片上传,而且支持ajax上传!而且支持上传之前图片的预览!而且支持图片拖拽上传!而且...

musishui
2016/08/25
17
0
文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 网页开发者们想了很多办法,试...

阮一峰
2012/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

前端杂谈: 如何实现一个 Promise?

前端杂谈: 如何实现一个 Promise? 首先, 什么是 Promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that i......

ssthouse_hust
17分钟前
1
0
Unsaft类

Unsafe类提供了硬件级别的原子操作,主要提供了以下功能 1、通过Unsafe类可以分配内存,可以释放内存; allocateMemory 分配内存 reallocateMemory 扩充内存 freeMemory 释放内存 2、可以定位...

器石_
18分钟前
1
0
git常用命令

首先打开git bash方式可以直接鼠标右击 或者在开始菜单(windows系统,苹果暂时不要问我,等我有钱买苹果电脑告诉你们0.0) 打开界面如下 1.查看远程仓库地址 git remote -v 2.创建本地分支 ...

熊小熊会写代码哦
29分钟前
2
0
离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了! Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容。它经常被用...

嫣然丫丫丫
31分钟前
2
0
SpringBoot 整合 BeetlSQL

SpringBoot 整合 BeetlSQL 1. beetlsql介绍 BeetSql是一个全功能DAO工具, 同时具有Hibernate 优点 & Mybatis优点功能,适用于承认以SQL为中心,同时又需求工具能自动能生成大量常用的SQL的应...

Jeff_Regan
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部