文档章节

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

PHer
 PHer
发布于 2014/06/23 16:56
字数 219
阅读 4085
收藏 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
用Vue来实现图片上传多种方式

项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。 没有业务场景的功能都是耍流氓,那么我们先来模拟...

huangjincq
07/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开发命令行工具的 12 个最佳实践

简评:设计良好的命令行应用是极富生产力的工具,本文介绍了开发命令行工具的 12 个最佳实践 CLI 是构建产品的绝佳方式,与 Web 应用不同的是它需要的时间更少,并且功能更强大。使用Web,你...

极光推送
29分钟前
5
0
DRAM和NAND Flash合约价持续走下坡路

大伙儿关心的内存和SSD产品价格在年内有望继续迎来一波减价。 据TrendForce旗下的DRAMeXchange发布的最新报告显示,本应该是购物旺季的Q4,DRAM芯片和NAND Flash芯片的合约采购价均呈现疲软的...

linux-tao
34分钟前
1
0
Vue学习记录

Vue学习记录 Vue实例 Vue实例的创建 var vm = new Vue({ // 选项}) 数据冻结 使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。 var obj = { foo: 'ba...

BakerZhu
34分钟前
2
0
day124-20181022-英语流利阅读-待学习

靠打零工能走上人生巅峰吗? Daniel 2018-10-22 1.今日导读 “零工经济”,一般指通过网站或 App 获得一些零碎的工作机会,从事不稳定的工作,赚取不稳定的薪水。由于从事这样的工作门槛相比...

飞鱼说编程
39分钟前
2
0
python学习笔记

马克

孙幼凌
48分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部