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. Oracle常用系统查询SQL

    以user1身份登录oracle,然后执行:select table_name from user_tables;或select table_name from tabs; 常用SQL --1.查询o ...

  2. LXT技术平台（Lenovo Trust Technology）

    LXT技术平台(L是Lenovo的缩写,T是技术Technology,X代表多个应用方向),是联想以用户需求为导向,整合先进技术,为用户提供最佳应用体验的一体化解决方案. 中文:LXT技术平台 外文: ...

  3. Endianess(字节次序)简介

    1. 基础 在解释Endianess前,需要先明白几个基础定义 1) 数据的高位与低位是什么 以1001001为例,则从左边算起是 高位 -> 低位, 简而言之就是左边是高位,右边是低位 而内存 ...

  4. [置顶] think in java interview-高级开发人员面试宝典(一)

    “生死六重门” 无论你是在职,非在职,高级工程师,工程师,架构师,如果你正在面试阶段,请看完此文! 相信这篇文章对你的职业生涯和阶值观会造成重大的改变! 如果你是一名PM或者是管理者正在物色合适的开发 ...

  5. Entity Framework泛型封装

    Entity Framework本身的增删改查其实 已经很方便了,不过做项目的时候用的多了也就觉得有点累了,每个业务实体基本上都涉及到到了增删改查这四个基本的要素,至于封装每个公司可能都不一样,接口, ...

  6. 使用SqlServer中的float类型时发现的问题

    在做项目中,使用了float类型来定义一些列,如:Price,但是发现了很多问题1.当值的位数大于6位是float型再转varchar型的时候会变为科学技术法显示    此时只好将float型转换成n ...

  7. vue-router登录校验后跳转到之前指定页面如何实现

    两个需求:1.用户点击购买需要下单,并跳转到订单页面,但是如果用户没有登录的话,中间有登录验证,会拦截:2.点击购买的时候,登录校验成功了,跳转到订单页面时,订单已创建,去付款即可.3.处理拦截至登录 ...

  8. 网络结构设计——负载均衡之LVS学习笔记（三）

    LVS按个人理解的说就是将一台Linux服务器当作路由器等功能的技术.LVS---Linux虚拟服务器. LVS实现了三种IP负载均衡技术VS/NAT.VS/TUN.VS/DR. 今天简单分享一下我在 ...

  9. 县级以上联动js实现无需数据库的行政区域下拉控件

    代码共享url: http://code.google.com/p/region-select-js/ 数据已经更新到中国统计局网站中的2012年的那批数据(制作后未核对); 下拉使用div模拟实现. ...

  10. GIT 恢复已删除的提交

    在Git中一切的操作都是可以恢复的,包括已经删除的提交,今天在做一个项目时就遇到了这种问题,也不知道是怎么回事不小心就把上午提交的所有代码都删除了,于是赶紧通过git log来查看日志,但奇怪的是当时 ...