标签:
需要用到: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(‘上传成功!‘); } }
效果预览:
标签:
原文地址:http://my.oschina.net/rain21/blog/425565