jquery异步上传图片

Posted 记得~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery异步上传图片相关的知识,希望对你有一定的参考价值。

用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

 

以上是关于jquery异步上传图片的主要内容,如果未能解决你的问题,请参考以下文章

img如何接收jquery ajax异步上传的动态图片

使用Ajax以及Jquery.form异步上传图片

异步上传图片,光用jquery不行,得用jquery.form.js插件

Jquery异步上传图片

jsp中使用jquery的ajaxfileupload插件怎么实现异步上传

jquery 和 FormData 最简单图片异步上传