今儿说点儿基础但是蛮重要的前端技术——使用file input实现文件上传。
话说很久以前,我一直以为鼠标在点击file input,弹出dialog,选择文件点”打开“以后,文件就自动上传了的,现在终于知道,自己太傻太天真了。操作系统才不会自动帮你做那个事情捏~ 今天跟踪了下js执行的流程,知道了真正执行上传动作之前在本地客户端到底完成了哪些动作。
当点击dialog中的”打开“后,客户端执行的唯一操作是改变file input的value,并把file input的相关文件参数赋给包裹它的form,比如,input的name是pic1,那么此时,form下就多了一个叫做”pic1“的对象属性,下面是这个属性在form中的样子,this就是那个form对象:
看到我画框的那个地方了吗?对,就是那个‘files’属性,这个才是整个上传的关键,它里面装的就是真正的要上传的文件的相关数据,展开看看,
里面包含文件名,大小,类型以及二进制获取方法等信息,这些在上传过程中都是关键的信息。
接下来,一般会选择两种方式触发form的提交:
1. file input的onchange中自动调用form.submit;
2. 添加一个submit型的input,点击提交。
form要正确实现上传提交要具备几个必须要素:
1. 有一个action,我的后台使用php写的,因此我的action叫做'/upload/do_upload'(我的没有php后缀,是因为我使用了codeigniter这个框架。)。
2. method="POST"
3. enctype="multipart/form-data"
form提交到后台以后是什么样子呢?按照action的设定,后台php文件中存在一个do_upload方法,在该方法中,你可以取到一个系统变量,叫做$_FILES,用firephp跟踪一下看看$_FILES中有什么数据:
由上图可知,$_FILES是一个数组,它的元素就是我们前端传过去的文件数据,在本例子中就是pic1,pic1中包含一些file信息。
接下来就要真的传文件到服务器了。在form提交以后,服务器会以临时文件的形式保存上传文件。我们需要做的,只是把这个临时文件copy到服务器目标文件夹。执行方式如下,
copy($_FILES['pic1']['tmp_name'], WEB_PATH.'/tmp/'.$user_uid.'.'.$file_type);
‘copy’是php的内置函数。第一个参数代表临时文件地址,第二个参数是目标文件路径。
特别要注意的是,你要事先创建这个WEB_PATH.'/tmp/'的路径,否则上传文件会找不到位置。
执行完这一步,去你的服务器文件夹下看一看,就会发现新文件已上传成功了。
文件上传成功后,总要做些回调处理,比如显示下预览图或者文件上传格式不正确时,返回错误信息。你可以直接echo返回,也可以自己写一个json解析函数,返回。
返回后这些信息如何接收是最后一个问题了。一般通用的方法时为
1. form设置target属性,如:target="Upfiler_file_iframe"。
2. 创建一个name为"Upfiler_file_iframe"的iframe,记得隐藏哦,因为他就是用来装数据的:
'<iframe frameborder="0" src="about:blank" name="Upfiler_file_iframe" id="Upfiler_file_iframe" class="fb_img_iframe" style="display:none;"></iframe>'
如此这般,后台上传函数执行完成后,返回的数据就会被塞到这个iframe中,那怎么取出来呢?我假设你用了JQuery库,则做下面的操作:
var jIO = $('#Upfiler_file_iframe');
jIO.load(function(){
var result = eval('(' + $(jIO[0].contentWindow.document.body).text() + ')');
});
jIO.load会在文件上传成功后,自动被调用;而 $(jIO[0].contentWindow.document.body).text()装的就是你从后台返回的信息。
你可能注意到我用了eval(),这是为什么呢?
原因是,我返回的数据是json格式,但是经过text()取值后,返回结果变成了全字符串格式,我需要eval一下,把它变回
对象,这样我才能通过"."的形式把我要的数据拿出来。之后你就可以为所欲为了:去掉加载图标,插入预览图等等。
至此,文件上传的操作就全部结束了。
备忘结束,也希望给来串门的其它同道以帮助。
- 大小: 138.9 KB
- 大小: 28.9 KB
- 大小: 19.2 KB
- 大小: 10.9 KB
分享到:
相关推荐
主要介绍了JS+php后台实现文件上传功能,结合实例形式分析了javascript前台表单数据提交与后台php文件传输处理相关操作技巧,需要的朋友可以参考下
但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。 比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是...
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。简而论之,不管是xml还是json都是为了方便在客户端与服务器端交互数据的...PHP 向 JavaScript 传值PHP 文件 json.php复制代码 代码如下:<?php $arr
如何用 PHP 实现文件上传(实例1) 如何用 PHP 文件操作函数 如何用 PHP 在 mySQL 中创建数据库表 如何在PHP发送邮件 如何在PHP中包含或插入文件 如何在 PHP 中操作目录 如何在PHP中进行身份认证 用getdate...
实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel=”stylesheet” type=”text/css” href=”uploadify.css” /> [removed][removed] <script type=”text/javascript” src=”...
6.2 PHP中文件操作详解 93 6.2.1 打开文件 93 6.2.2 关闭文件 94 6.2.3 读取文件 94 6.2.4 写入文件 95 6.2.5 删除文件 96 6.2.6 复制文件 96 6.3 本地文件的操作实例——小型留言本 96 6.3.1 留言发表模块 96 6.3.2...
PHP100视频教程78:PHP+Flash多文件异步上传 swfupload PHP100视频教程79:PHP上传RAR压缩包并解压目录 PHP100视频教程80:ADODB PHP 数据库万能引擎类(上) PHP100视频教程81:ADODB PHP 数据库万能引擎类(下...
后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载 官方网站:http://www.uploadify.com/ 直接下载...
5、跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库 6、支持大部分的图表类型:直线图,...
78:PHP+Flash多文件异步上传 swfupload 79:PHP上传RAR压缩包并解压目录 80:ADODB PHP 数据库万能引擎类(上) 81:ADODB PHP 数据库万能引擎类(下) 82:PHP开发通用采集入库程序 83:PHP开发通用采集入库程序二...
elFinder是用于Web的开源文件管理器,使用jQuery UI用JavaScript编写。 创建的灵感来自Mac OS X操作系统中使用的Finder程序的简便性。 内容 分行 -主要开发部门 -2.1开发分支,提交时自动构建为2.1 - 2.1每日构建...
此外,象JavaScript这种客户端的脚本语言也提供了对正则表达式的支持。由此可见,正则表达式已经超出了某种语言或某个系统的局限,成为人们广为接受的概念和功能。 正则表达式可以让用户通过使用一系列的特殊字符...
Yii中的资源是和Web页面相关的文件,可为CSS文件,JavaScript文件,图片或视频等, 资源放在Web可访问的目录下,直接被Web服务器调用。 通过程序自动管理资源更好一点,例如,当你在页面中使用 yii\jui\DatePicker ...
9-24 4.php文件编程③-文件的上传和下载 文件上传细节讨论 9-24 5.php文件编程④-mini文件共享网实现分析 9-24 6.PHP绘图技术 9-26 1 课程回顾 9-26 2 javascript基本介绍 9-26 3 javascript变量 标识符规范 9-26 4 ...
9-24 4.php文件编程③-文件的上传和下载 文件上传细节讨论 9-24 5.php文件编程④-mini文件共享网实现分析 9-24 6.PHP绘图技术 9-26 1 课程回顾 9-26 2 javascript基本介绍 9-26 3 javascript变量 标识符规范 9-26 4 ...
它使用 PHP 和 JavaScript 编写,支持多种数据库系统,比如 MySQL/MariaDB、PostgreSQL、Oracle 数据库和 SQLite。它可以使你的桌面系统和云服务器中的文件保持同步,Nextcloud 为 Windows、Linux、Mac、安卓以及...
ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解 一、去http://cksource.com/下载这两个东西 二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的...
9-24 4.php文件编程③-文件的上传和下载 文件上传细节讨论 9-24 5.php文件编程④-mini文件共享网实现分析 9-24 6.PHP绘图技术 9-26 1 课程回顾 9-26 2 javascript基本介绍 9-26 3 javascript变量 标识符规范 9-26 4 ...
9-24 4.php文件编程③-文件的上传和下载 文件上传细节讨论 9-24 5.php文件编程④-mini文件共享网实现分析 9-24 6.PHP绘图技术 9-26 1 课程回顾 9-26 2 javascript基本介绍 9-26 3 javascript变量 标识符规范 9-26 4 ...
9-24 4.php文件编程③-文件的上传和下载 文件上传细节讨论 9-24 5.php文件编程④-mini文件共享网实现分析 9-24 6.PHP绘图技术 9-26 1 课程回顾 9-26 2 javascript基本介绍 9-26 3 javascript变量 标识符规范 9-26 4 ...