原理：
1.使用FileReader 读取图片的base64编码
2.使用ajax，把图片的base64编码post到服务器。
3.根据接收到post的数据分析图片的类型(jpg,gif,png)，并把base64_decode后的数据生成对应类型的图片文件。
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>
<style type="text/css">
body{margin: 0px; background:#f2f2f0;}
p{margin:0px;}
.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}
.file{position:absolute; width:100%; font-size:90px;}
.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}
.filebtn:hover{background:#04bc0d;}
.showimg{margin:10px auto 10px auto; text-align:center;}
</style>
<script type="text/javascript">
window.onload = function(){
// 选择图片
document.getElementById('img').onchange = function(){
var img = event.target.files[0];
// 判断是否图片
if(!img){
return ;
}
// 判断图片格式
if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){
alert('图片只能是jpg,gif,png');
return ;
}
var reader = new FileReader();
reader.readAsDataURL(img);
reader.onload = function(e){ // reader onload start
// ajax 上传图片
$.post("server.php", { img: e.target.result},function(ret){
if(ret.img!=''){
alert('upload success');
$('#showimg').html('<img src="' + ret.img + '">');
}else{
alert('upload fail');
}
},'json');
} // reader onload end
}
}
</script>
</head>
<body>
<p class="title">使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>
<p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p>
<p class="showimg" id="showimg"></p>
</body>
</html>
server.php
<?php
$img = isset($_POST['img'])? $_POST['img'] : '';
// 获取图片
list($type, $data) = explode(',', $img);
// 判断类型
if(strstr($type,'image/jpeg')!==''){
$ext = '.jpg';
}elseif(strstr($type,'image/gif')!==''){
$ext = '.gif';
}elseif(strstr($type,'image/png')!==''){
$ext = '.png';
}
// 生成的文件名
$photo = time().$ext;
// 生成文件
file_put_contents($photo, base64_decode($data), true);
// 返回
header('content-type:application/json;charset=utf-8');
$ret = array('img'=>$photo);
echo json_encode($ret);
?>
相关推荐
本示例主要探讨如何使用JavaScript结合IFrame技术来实现异步图片上传，并提供预览功能，同时确保兼容Firefox、Chrome和IE9等主流浏览器。 首先，我们需要了解异步上传的基本原理。异步上传，也称为Ajax上传，是指在...
在图片上传场景中，iframe常被用来处理文件上传的异步请求，因为文件上传通常涉及到POST表单提交，可能导致页面刷新。通过在iframe中进行表单提交，可以在后台处理文件上传，而不会影响主页面的用户体验。开发者通常...
此外，如果你的项目需要上传多个图片或者处理其他类型的文件，可以扩展此代码以适应更复杂的需求，例如使用数组存储文件信息，或者添加上传按钮并使用Ajax异步上传文件到服务器。 压缩包中的"chorme_img_unload...
- 对于不支持FileReader API的IE7-10，可以利用IFrame的`contentDocument`或`contentWindow`属性提交表单，获取服务器返回的预览图片URL。 3. **ASP后台处理**： - 接收上传的图片文件，可以使用`Request.Files`...
- 在用户选择图片后，可以通过`FileReader` API的`createObjectURL`方法获取图片的本地URL，从而实现即时预览。 - 用户选择文件时触发`onchange`事件，获取`<input type="file">`的`files`属性，从中获取选中的...
3. **兼容性处理**：对于不支持FileReader和FormData的浏览器（如IE8），可能需要使用iframe或者ActiveXObject（XMLHttpRequest的IE特有实现）来模拟Ajax上传。 4. **上传过程**：当文件选择后，使用Ajax发送POST...
无组件上传技术是一种在网页或应用中实现文件上传的方式，它并不依赖于特定的前端组件，如Flash、Java Applet或ActiveX控件。这种技术通常利用HTML5的File API和Ajax异步通信来实现，使得用户可以在不安装额外插件的...
10. 数据传输：如果选择的文件夹需要上传到服务器，可以使用FormData对象来封装文件信息，然后通过XMLHttpRequest或Fetch API发送到服务器。 总的来说，实现在线选择文件夹浏览文件夹内容的功能涉及到前端的文件...
在移动端，考虑到兼容性和性能问题，项目可能采用了form和iframe的组合来异步上传图片。这是因为老版本的浏览器可能不支持Ajax文件上传，而form提交可以跨域并返回结果。在这个场景下，一个隐藏的iframe被创建，form...
例如，对于图片，可以创建一个新的Image对象，设置其src属性为从服务器获取的二进制数据的Base64编码；对于文档，可以将解析后的HTML内容插入到IFrame中。为了实现批量预览，可以利用数组和循环结构，依次处理每个...