码迷,mamicode.com
首页 > Web开发 > 详细

jquery异步上传图片

时间:2017-08-19 17:01:29      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:ror   ext   end   超过   false   类型   jquer   sda   ajax   

用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异步上传图片

标签:ror   ext   end   超过   false   类型   jquer   sda   ajax   

原文地址:http://www.cnblogs.com/jide/p/7396776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!