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

ajax上传文件 预览

时间:2015-06-06 00:33:28      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

需要用到:ajaxfileupload

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://3.zy62.com/ajaxfileupload.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">ajax上传</h1>

<form id="upload" action="https://api.weixin.qq.com/cgi-bin/media/upload?access_token=mdJiyvzApDgpaBuin0V4JbhdmsGcaPDJvsrOTdL0l8185JvqvW2WIS0EIKCP9ntFXf82fWaJfEWiRdivissAKKcR6pJlM6V66RtjN29rVjA&type=image" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" name="media" id="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<a class="btn btn-default" href="#" id="test" role="button">Link</a>
<p>
<img id="img" src=""/>
</p>
<script>
$(document).ready(function(){
	$(‘#test‘).click(function(){
		$.ajaxFileUpload({
			  url:‘{:U("Index/upload")}‘,
			  secureuri: false,
			  fileElementId:‘file‘,
			  dataType: ‘text‘,//返回数据类型
			  success: function (data, status){
			      //alert(data);
				  $("#img").attr("src","http://127.0.0.1/6/0604/Uploads/2015-06-06/"+data);
			  },
              error: function (data, status, e)//服务器响应失败处理函数
              {
                  alert(e);
              }
			});
		//$(‘#upload‘).submit();
	});
});
</script>
</div>
</body>
</html>



PHP接收文件:

public function upload(){
		$upload = new \Think\Upload();// 实例化上传类
		$upload->maxSize   =     3145728 ;// 设置附件上传大小
		$upload->exts      =     array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘);// 设置附件上传类型
		$upload->rootPath  =     ‘./Uploads/‘; // 设置附件上传根目录
		$upload->savePath  =     ‘‘; // 设置附件上传(子)目录
		// 上传文件 
		$info   =   $upload->upload();
		if(!$info) {// 上传错误提示错误信息
			//$this->error($upload->getError());
			echo 456;
		}else{// 上传成功
			echo $info[‘media‘][‘savename‘];
			//print_r($info);
			//$this->success(‘上传成功!‘);
		}
	}

效果预览:

技术分享


ajax上传文件 预览

标签:

原文地址:http://my.oschina.net/rain21/blog/425565

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