前台代码:
<html> <head> <title>ajax上传文件</title> <style type="text/css"> #con{ width:500px; height:500px; border:1px solid #ddd; margin:50px auto; } #look{ width:300px; height:300px; border:1px solid #aaa; margin:10px auto; text-align: center; line-height:300px; color:#aaa; } #uploadBtn{ display:block; width:100px; line-height:35px; background:#3F9F00; color:#fff; text-align: center; margin:20px auto; cursor:pointer; } </style> </head> <body> <div id="con"> <div id="look">预览区</div> <span id="uploadBtn">点击上传</span> <input type="file" style="display:none;" id="uploadFile" name="uploadFile" onchange="uploadFile()"/> </div> <script type="text/javascript" src="__ROOT__/Public/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="__ROOT__/Public/js/ajaxfileupload.js"></script> <script type="text/javascript"> $("#uploadBtn").click(function(){ $("#uploadFile").click(); }); function uploadFile(){ var url = "{:U('home/index/uploadPic')}"; $.ajaxFileUpload({ url: url, type: 'post', secureuri: false, //一般设置为false fileElementId: "uploadFile", // 上传文件的name属性名 dataType: 'text', //返回值类型,一般设置为json success: function(data){ var imgName=delHtmlTag(data.replace(/\"/g,"")); var imgsrc = "http://127.0.0.1/uploadFile/"+imgName;//此处填写你的图片存储地址 var Img = "<img src="+imgsrc+" height='300'width='300'>"; $("#look").html(Img); //写存储数据库逻辑 }, error: function(data, status, e){ alert(e); console.log(data); } }); } function delHtmlTag(str){ return str.replace(/<[^>]+>/g,"");//去掉所有的html标记 } </script> </body> </html>
后台代码:
$config = array( 'maxSize' => 3145728, 'rootPath' => './uploadFile/', 'saveName' => array('uniqid',''), 'exts' => array('jpg', 'gif', 'png', 'jpeg'), 'autoSub' => true, 'subName' => array('',''), ); $upload = new \Think\Upload($config);// 实例化上传类 $info = $upload->upload(); $path = $info['uploadFile']['savename']; $this->ajaxReturn($path);
ajaxfileupload下载:点击下载
整套源码下载: