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. SHA加密算法工具类

    1.利用Apache的工具类实现加密: maven: <dependency> <groupId>commons-codec</groupId> <artif ...

  2. 数据结构及算法篇bsearch crypt lfind lsearch qsort rand srand

    crypt(将密码或数据编码) 相关函数 getpass 表头文件 #define _XOPEN_SOURCE #include<unistd.h> 定义函数 char * crypt ( ...

  3. AndEngine中文文档下载地址

    AndEngine doc  downloadhere 下载地址:http://pan.baidu.com/s/1bnjcL0V 文档是由github仓库AndEngine的代码生成. 本doc中包括 ...

  4. Git教程之工作区和暂存区

    工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区:

  5. Informatica 常用组件Lookup缓存之二 使用永久查找高速缓存

    可以将"查找"转换配置为使用非永久或永久高速缓存.基于"查找高速缓存永久"属性的会话成功后,PowerCenter 将保存或删除查找高速缓存文件. 如果查找表在 ...

  6. C语言 strftime 格式化显示日期时间 时间戳

    C/C++程序中需要程序显示当前时间,可以使用标准函数strftime. 函数原型:size_t strftime (char* ptr, size_t maxsize, const char* fo ...

  7. WebViewClient 简介 API 案例

    代码位置:https://github.com/baiqiantao/WebViewTest.git 设计思想理解 在WebView的设计中,不是什么事都要WebView类干的,有相当多的杂事是分给其 ...

  8. c++ 编译时检测结构体大小的的宏定义写法

    一种写法: template <bool> struct CompileAssert { }; #define COMPILE_ASSERT(expr, msg) \ typedef Co ...

  9. IDA Pro基本简介

    IDA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行流,Yes箭头默认为绿色,No箭 ...

  10. [Node.js]31. Level 7: Redis coming for Node.js, Simple Redis Commands

    Let's start practicing using the redis key-value store from our node application. First require the  ...