1、基于TP3.2+ajaxfileupload进行无刷新上传图片，本次只上传一张，多张以后搞出来再发

2、效果：

 

3、html代码：

 <html>

 <head>

     <meta http-equiv="content-type" content="text/html;charset=utf-8">

     <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/Upload/ajax_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 = "https://m.xxiangfang.com/Uploads/"+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>

4、后台php：

    /**

     * 实现ajax无刷新上传图片 -xzz

     * 基于TP3.2框架

     */

    public function ajax_uploadPic(){

            $config = array(

                'maxSize'    =>   3145728,

                'rootPath' => './Uploads/',

                '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);

        //这里进行路径存储于数据库

        //code

    }

5、简单的一个Demo，拿去耍~（JS插件有想要的M我邮箱：857328943@qq.com）

TP3.2：实现Ajax无刷新上传图片的更多相关文章

  1. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  2. ajax无刷新上传图片

    页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  3. 无刷新上传图片，ajax 和 iframe

    iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  4. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  5. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  6. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  7. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...

  8. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  9. 使用SWFUpload无刷新上传图片

    使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...

随机推荐

  1. Eclipse 报 “Exception in thread "main" java.lang.OutOfMemoryError: Java heap space ”错误的解决办法

    1.打开Eclipse软件,选择菜单栏run,在二级菜单中选择 Debug Configurations...  项,如下图所示. 2.在弹出的窗口中选择 (x)=Arguments 选项卡,VM a ...

  2. Struts2 无后缀action请求

    如果将Struts2的filter-mapping配置成 <filter-mapping> <filter-name>struts2</filter-name> & ...

  3. struts2中<welcome-file>index.action</welcome-file>直接设置action，404的解决方案

    这几天的项目页面的访问全部改为.action访问,在修改首页时遇到了问题.将web.xml文件中<welcome-file>index.action</welcome-file> ...

  4. C#中的String与string

    在C#中,string 是 System.String 的别名,所以基本上在使用时是没有差别的. 习惯上,我们把字符串当作对象时(有值的对象实体),我们用string. 而我们把它当类时(需要字符串类 ...

  5. 高效的数据压缩编码方式 Protobuf

    一. protocol buffers 是什么? Protocol buffers 是一种语言中立,平台无关,可扩展的序列化数据的格式,可用于通信协议,数据存储等. Protocol buffers ...

  6. 用过Retina视网膜屏幕的笔记本电脑的后果

    用过Retina视网膜屏幕的笔记本电脑的后果是过程中感觉很不错,但是结果是普通屏幕再也看不上眼了.发现了原来看的好好的屏幕多出了许多的像素点,没办法,火眼金睛了.

  7. 深入C++的new

    new”是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂,也非常神秘,下面我将把我了解到的与new有关的内容做一个总结. new的过程 当我们使用关键字new在堆上动态 ...

  8. mysql必知必会(一、数据库基础知识)

    基础概念 1.数据库(database):是一个以某种有组织的方式存储的数据集合.(保存有组织的数据的容器) 2.表(table):是一种结构化的文件,可用来存储某种特定类型的数据.(表名在同个数据库 ...

  9. ASP.NET与ASP.NET MVC 中Cache的总结

    Cache有多种翻译,可以是高速缓冲存储器,也可以是法国的服装品牌,本文只是简单的谈谈就是ASP.NET 中Cache,做过Web应用程序的都知道,如果网站访问量比较大,系统应用程序可以将那些频繁访问 ...

  10. jquery选择器用法笔记（第一部分）

    由于我在项目中用jquery比较多,而且觉得jquery真的很不错,尤其是其灵活高效的选择器更是令人无法忘怀.那么,今天就来写一篇非常基础的关于jquery选择器的文章,路过的朋友可以收藏以作参考. ...