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. UCOS移植心得(

    移植UCOS之前,你首先应该做好三件事: 1．弄懂UCOS,这是谁都知道的哦 ^_^ 2. 弄懂你想要移植到的硬件平台 3. 清楚你使用的编译器是如何处理函数的局部变量和怎么样处理函数间的参数传递 这 ...

  2. Peter Norvig：学习在于挑战和重复

    黄小非译注(本文来自伯乐在线):本文作者Peter Norvig目前任职于Google,其职位是研究主管(Director of  Research). Peter Norvig是享誉世界的计算机科学 ...

  3. java静态初始化数据

    1.通过静态成员变量和静态方法组合(比较单一) public class A{ private static String t=getInit(); private static String get ...

  4. 简明python教程 --C++程序员的视角（七）：异常

    当你的程序中出现某些 异常的 状况的时候,异常就发生了.例如,当你想要读某个文件的时候,而那个文件不存在.或者在程序运行的时候,你不小心把它删除了.上述这些情况可以使用异常来处理. 假如你的程序中有一 ...

  5. CVPR14 图像检索papers

    CVPR14年关于图像检索方面的papers,汇总成一个list,方便阅读. 图像检索 Triangulation embedding and democratic aggregation for i ...

  6. 解决 Ubuntu Software (Software Center) Crash 问题

    问题描述: no application data found 解决方式: sudo apt purge gnome-software ubuntu-software sudo apt autorem ...

  7. Mysql/MariaDB的多主集群实现：Galera Cluster

    Galera Cluster是Codership公司开发的一套免费开源的高可用方案,属于multi-master的集群架构,如图所示: 三个实例,组成了一个集群,而这三个节点与普通的主从架构不同,它们 ...

  8. python文章学习列表

    1.https://home.cnblogs.com/u/darkpig/feed/blog/ 这篇博主的系列文章 2.

  9. 混沌数学之Rössler(若斯叻)吸引子

    若斯叻吸引子(Rössler attractor)是一组三元非线性微分方程: frac{dx(t)}{dt} = -y(t)-z(t) frac{dy(t)}{dt} = x(t)+a*y(t) fr ...

  10. 如何使用Windows Library文件进行持久化

    前言 想象一下,假设在你不知道的情况下,攻击者在你的计算机上放置了一个恶意文件.每当你访问桌面上某个文件夹时(例如Documents文件夹),都会执行一次该文件.这样的场景,通过利用一种鲜为人知的持久 ...