jquery异步上传图片

Posted 2020-10-03 记得~

用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