前台代码:

    

 <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下载:点击下载


整套源码下载:

ajax上传文件.rar




官方公众号