php Ajax实现异步文件上传的代码

php教程 ajax实现异步文件上传的代码
1:取得file对象
2:读取2进制数据
3:模拟http请求,把数据发送出去(这里通常比较麻烦)
在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据;
4:完美实现
遇到的问题
目前仅有 firefox 可以正确上传文件。(chrome也可以采google.gears上传)
对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因)
chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。(经过测试普通文本文件可以正确上传)

<!doctype html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>html5 file and filereader</title>
<link href="html/ui.css教程" _mce_href="html/ui.css" rel="stylesheet" />
</head>
<body>
<style type="text/css"><!--
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
-webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;
}
.bl{ font-weight:700;}
.dl{ padding:10px; border-top:1px dotted #999;}
.dl dd{ padding:0; margin:0;}
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
.log ul{margin:0px; padding:0; list-style:none;}
--></style><style type="text/css" _mce_bogus="1"><!--
.box{background:#f8f8f8;border:1px solid #ccc;padding:10px;-webkit-box-shadow:#000 0px 0px 4px;-moz-box-shadow:#000 0px 0px 4px;
-webkit-border-radius:2px;font-family: 'segoe ui', calibri, 'myriad pro', myriad, 'trebuchet ms', helvetica, arial, sans-serif;
}
.bl{ font-weight:700;}
.dl{ padding:10px; border-top:1px dotted #999;}
.dl dd{ padding:0; margin:0;}
.log{border:1px solid #ccc; background:#f8f8f8; width:200px; position:absolute; right:10px; top:10px;}
.log li{border:1p dotted #ccc;word-wrap:break-word;word-break:break-all; margin:0px; padding:0;}
.log ul{margin:0px; padding:0; list-style:none;}
--></style>
<div class="box" id="baseinfo">
<h2>(把图片拖拽到这里)利用 filereader 获取文件 base64 编码</h2>
<div></div>
</div>
<div class="log">
<ul id="log">
</ul>
</div>
<script type="text/css" ><!--
(function(){
window.datavalue = 0;
var html = ' <dl class="dl">
<dd>filename: $filename$</dd>
<dd>filetype: $filetype$</dd>
<dd>filesize: $filesize$</dd>
<dd><img src="$data$" /></dd>
<dd>filebase64: <br/>
<div style="width:100%; height:100px;">$filebase64$</div>
</dd>
</dl>
'
var log = function(msg){
//console['log'](msg);
document.getelementbyid('log').innerhtml += '<li>'+ msg +'</li>';
}

var dp = function(){
var defconfig = {
dropwrap : window
}
this.init.apply(this, [defconfig]);
this.file = null;
}
dp.prototype = {
init:function(args){
var dropwrap = args.dropwrap;
var _this = this;
dropwrap.addeventlistener("dragenter", this._dragenter, false);
dropwrap.addeventlistener("dragover", this._dragover, false);
dropwrap.addeventlistener('drop', function(e){_this.readfile.call(_this,e)} , false);
log('window drop bind--ok');
},
_dragenter:function(e){e.stoppropagation();e.preventdefault();},
_dragover:function(e){e.stoppropagation();e.preventdefault();},
readfile:function(e){
e.stoppropagation();
e.preventdefault();
var dt = e.datatransfer;
var files = dt.files;
for(var i = 0; i< files.length;i++){
var html = html.slice();
html = this.writeheader(files[i], html);
this.read(files[i], html);
}
},
read:function(file, h){
var type = file.type;
var reader = new filereader();
reader.onprogress = function(e){
if (e.lengthcomputable){
log('progress: ' + math.ceil(100*e.loaded/file.size) +'%')
}
};
reader.onloadstart = function(e){
log('onloadstart: ok');
};
reader.onloadend = function(e){
var _result = e.target.result;
//console['log'](e.target);
log('data uri--ok');
var d = document.createelement('div');
h = h.replace('$filebase64$', _result);
if(/image/.test(file.type)){
h = h.replace('$data$',_result);
}
d.innerhtml = h;
document.getelementbyid('baseinfo').appendchild(d);
};
reader.readasdataurl(file); // www.111cn.net base 64 编码
return;
},
writeheader:function(file, h){
log(file.filename + '+' + (file.size/1024));
return h.replace('$filename$', file.filename).replace("$filesize$",(file.size/1024)+'kb').replace("$filetype$",file.type);
}
}
new dp();
})()
// --></script>
</body>
</html>

filereader对象

var filereader = new filereader();
filereader.onloadend = function(){
console.log(this.readystate); // 这个时候 应该是 2
console.log(this.result); 读取完成回调函数,数据保存在result中
}
filereader.readasbinarystring(file);// 开始读取2进制数据 异步 参数为file 对象
//filereader.readasdataurl(file); // 读取base64
//filereader.readastext(file);//读取文本信息

时间: 2024-09-21 20:02:21

php Ajax实现异步文件上传的代码的相关文章

php+ajax实现图片文件上传实例代码

方法一,利用jquery ajaxfileupload.js文件上传 其实就是实现无刷新式的文件上传.可采用IFRAME文件上传原理. 实际上在用PHP上传文件时...只能用$_FILES形式,但是若我们只是单一的用JS方式取其ID,如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的(但是还是有很多人这样做,刚开始时我也是). 可

php中通过Ajax如何实现异步文件上传的代码实例_php技巧

1:取得file对象 2:读取2进制数据 3:模拟http请求,把数据发送出去(这里通常比较麻烦) 在forefox下使用 xmlhttprequest 对象的 sendasbinary 方法发送数据: 4:完美实现 遇到的问题 目前仅有 firefox 可以正确上传文件.(chrome也可以采google.gears上传) 对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因) chrome以及其他高级浏览器没有 sendasbinary 方法 只能使用

服务器-我这样做asp.net异步文件上传进度条

问题描述 我这样做asp.net异步文件上传进度条 前台两个请求 1.上传文件的请求 2.获取上传进度的请求 1. $("#ufrm").ajaxSubmit({ url: "ReceivFile.ashx", type: "post", success: function (data) { ... 2. $.ajax({ type: "post", url: "Filepro.aspx", data: {

基于ajax html实现文件上传技巧总结_AJAX相关

引语:大家都知道,html中上传文件就一个input,type=file就搞定了.但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的.但是其实挺简单,今天就来说说上传文件小技巧吧! 1. 怎样自定义样式? 1).只管按照自己喜欢看到的样式去定义即可,如<a href='javascript:;' class='upload-button'></a>,可以是背景图片效果,可以是文字指示,总之想怎么改怎么改!有了按钮,还需要一个文件名容器,用来存放选择上传文件时的

PHP+iFrame实现页面无需刷新的异步文件上传_php技巧

本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧.分享给大家供大家参考.具体分析如下: 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了. 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多. 先来给初学者补补基础知识: 1. 在iframe标签一般会指定其name特性以于标识: 2. 在form表单中通过

一些常用弹出窗口/拖放/异步文件上传等实用代码_javascript技巧

久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了. 弹出窗口 我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层:   这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了 主要代码如下: 复制代码 代码如下: //弹出层剧中 function popup(popupName) { var _scrollHeight = $(document).scrollT

基于Ajax技术实现文件上传带进度条_AJAX相关

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分

jQuery+ajax简单实现文件上传的方法_jquery

本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

基于Ajax技术实现文件上传带进度条

1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运行本实例,如图1所示,访问文件上传页面,单击"浏览"按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示.选择完要上传的文件后,单击"提交"按钮,将会上传文件并显示上传进度. 2.技术要点 主要是应用开源的Common-FileUpload组件来实现分