文档章节

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

PHer
 PHer
发布于 2014/06/23 16:56
字数 219
阅读 4061
收藏 9
点赞 0
评论 0
<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
博文 118
码字总数 38443
作品 0
成都
程序员
JS FormData对象

想得到一个FormData对象: W3c草案提供了三种方案来获取或修改FormData。 方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对: 方案2:取得form元素对象,将它作为参数传入...

西来飞鸿 ⋅ 2014/10/21 ⋅ 1

Ajax实现附件上传

客户端需要获得附件的信息 方法一:在客户端利用js获得附件的具体信息 方法二:利用FormData来收集表单数据,同时也能收集附件信息 <script type='javascript'> var reg = document.getEleme...

PHer ⋅ 2014/06/23 ⋅ 0

谈一次ajax上传图片到又拍云案例分享

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

白狼栈 ⋅ 2016/03/13 ⋅ 0

从实战中学前端:打造自己的html5文件上传插件

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

有力量的神经病 ⋅ 2016/12/17 ⋅ 0

多种上传图片的方法

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

筱飞 ⋅ 2016/06/07 ⋅ 0

两种文件上传的实现-Ajax上传和form+iframe

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

musishui ⋅ 2016/08/25 ⋅ 0

jeecg中上传附件的处理

在jeecg中如果用了formvalid标签来生成表单代码的话,是不能同时提交附件的,比如最常用的html标签 input type="file"是不能用的,后台接收不到附件,具体原因是因为jeecg中都是用ajax的方式...

z_jordon ⋅ 2015/04/21 ⋅ 0

文件上传的渐进式增强

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

阮一峰 ⋅ 2012/08/10 ⋅ 0

收集form数据+附件上传+上传图片立即显示+上传大附件,进度条显示

ajax收集表单数据 分为两种情况: 一 有form表单情况 <script type="text/javascript"> var logFormObject=document.getElementById('logon'); function acceppt3(){ var xhr = creatXMLHtt......

PHer ⋅ 2014/06/23 ⋅ 0

利用FormData进行ajax上传文件

个人实现方式: html代码 js代码: 后台python代码 很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象,HTML5还支持使...

单蛙 ⋅ 2016/06/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++内存映射文件居然是这样?!

内存映射文件大家都时不时听过,但它到底是个什么?赶紧来看看吧 内存映射文件到底是干嘛的呢?让我们先来思考下面几个问题: 如果您想读的内容大于系统分配的内存块怎么办?如果您想搜索的字...

柳猫 ⋅ 28分钟前 ⋅ 0

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 今天 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部