php结合Ajax实现异步文件下传的代码实例
日期：2014-05-16 浏览次数：20600 次
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(
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(
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
