用ajaxfileupload.js插件实现图片的异步上传
html代码
<input id="img" type="file" name="img" />
Js代码
$('#img').change(function () {
$.ajaxFileUpload({
url:'demo.php', //你处理上传文件的服务端
secureuri:false,
fileElementId:'img',//与页面处理代码中file相对应的ID值
processData : false,
contentType : false,
dataType: 'text', //返回数据类型:看后端返回的是什么数据,在IE下后端要设置请求头的Content-Type:text/html; charset=UTF-8
success: function (data, status) {
},
error: function(data, status, e){ //提交失败自动执行的处理函数
alert(e);
}
})
});
//可以添加文件后缀判断
php代码
<?php
$path = "./";
$extArr = array("jpg", "png", "gif");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['img']['name'];
$size = $_FILES['img']['size'];
if(empty($name)){
echo '请选择要上传的图片';
exit;
}
$ext = extend($name);
if(!in_array($ext,$extArr)){
echo '图片格式错误!';
exit;
}
if($size>(100*1024)){
echo '图片大小不能超过100KB';
exit;
}
$image_name = time().rand(100,999).".".$ext;
$tmp = $_FILES['img']['tmp_name'];
if(move_uploaded_file($tmp, $path.$image_name)){
echo '<img src="'.$path.$image_name.'" class="preview">';
}else{
echo '上传出错了!';
}
exit;
}
//获取文件类型后缀
function extend($file_name){
$extend = pathinfo($file_name);
$extend = strtolower($extend["extension"]);
return $extend;
}
参考博客:
1.用法:http://blog.csdn.net/zly_ir/article/details/51145795
2.可重复上传:http://blog.yadgen.com/?p=2010
示例代码 https://github.com/hongxingwen/learn/tree/master/uploadImg