jquery 无刷新上传的小function

function zll_up(click_id,up_url,text_id,show_id){
    this.create = function(){}
    //当点击指定元素时,创建iframe form input(file)等元素
    $("#"+click_id).click(function(){
        console.log(‘click‘);
        $("body").append("<form action=‘"+up_url+"‘ method=‘post‘ enctype=‘multipart/form-data‘ target=‘iframe_"+click_id+"‘ style=‘display:none;‘ name=‘form_"+click_id+"‘ id=‘form_"+click_id+"‘><input type=‘file‘ name=‘tupian_"+click_id+"‘ id=‘tupian_"+click_id+"‘></form>");
        $("body").append("<iframe style=‘display:none;‘ name=‘iframe_"+click_id+"‘ id=‘iframe_"+click_id+"‘></iframe>");

        $(‘#tupian_‘+click_id).change(function(){
            console.log(‘change‘);
            var file = document.getElementById("tupian_"+click_id).files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
             reader.onload = function(evt){
             $("#"+show_id).html(‘<img style="width:100%;height:100%;" src="‘ + evt.target.result + ‘" />‘);
            }
            $("#form_"+click_id).submit();
        });

        $("#iframe_"+click_id).on("load",function(){
            console.log(‘load‘);
            var data = $(window.frames[‘iframe_‘+click_id].document.body).find("textarea").html();
            console.log(data);
            $("#"+text_id).val(data);
            //当上传完成时删除之前创建的元素
            console.log(‘remove‘);
            $("#iframe_"+click_id).remove();
            $("#form_"+click_id).remove();
        });

        $("#tupian_"+click_id).click();
    });
}

js代码

<div class="control-group">
                        <label class="control-label item-label" >上传图片 (750*1525)<span class="check-tips"></span></label>
                        <div class="controls uploadrow2" data-max="1" title="点击修改图片" rel="cover" id="upclick">
                            <input type="hidden" name="img" id="img" value="{$art.img}">
                            <div class="upload-img-box" rel="img" id="imgshow" style="height:auto;">
                                <if condition="!empty($art[‘img‘])">
                                    <img src="__UPLOADS__/{$art.img}"/>
                                </if>
                            </div>
                        </div>
                    </div><script type="text/javascript" src="引入上面的js代码"></script><script type="text/javascript">       zll_up("upclick","{:U("$con_name/z_upload")}","img","imgshow");</script>

html代码

function z_upload(){
        //单文件上传
        //公用上传函数 zll 2017-6-7 11:35:44
        //用于iframe的无刷新上传
        $config = array(
                ‘maxSize‘    =>    3145728,
                ‘rootPath‘   =>    ‘./Uploads/‘,
                ‘savePath‘   =>    ‘‘,
                ‘saveName‘   =>    array(‘uniqid‘,‘‘),
                ‘exts‘       =>    array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘),
                ‘autoSub‘    =>    true,
                ‘subName‘    =>    array(‘date‘,‘Ymd‘),
            );
            $upload = new \Think\Upload($config);// 实例化上传类
            $info = $upload->upload();
            if(!$info) {
                // 上传错误提示错误信息
                //    echo $upload->getError();
                echo "<textarea>error</textarea>";
            }else{// 上传成功
                echo "<textarea>".$info[array_keys($info)[0]][‘savepath‘].$info[array_keys($info)[0]][‘savename‘]."</textarea>";
            }
    }

PHP代码(thinkphp3.2.3)

时间: 2025-01-03 20:44:10

jquery 无刷新上传的小function的相关文章

ASP.NET MVC使用jQuery无刷新上传

昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说,把源代码一一照搬的复制.难道它不能移值至ASP.NET MVC应用程序吗?Insus.NET想了一下,源代码是html+ashx的,它一定能的. 网友发送能正常运行的代码给Insus.NET...... 重点的script文件:http://download.cnblogs.com/insus/M

jQuery无刷新上传学习心得

记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新一次页面,给人的感觉不是太好.但是那是,并不是太在意这个细节,而且JS知识非常匮乏,所以并没有去找解决的办法. 当时,这位前辈提到的一种方法是: 准备一个主页面(用户界面)和一个上传页(放在主页面隐藏的iframe中,作为真正意义的上传页),当点击主页面的上传按钮时,实际上是调用了上传页的上传控件,

jQuery无刷新上传之uploadify简单试用

先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究"ajax无刷新上传"方面的一些插件,用SWFUpload实现了无刷新上传的功能,不过个人觉得不是很完美. 昨天在网上找到了一个叫做uploadify的jquery上传插件,看到园子里有几篇文章也是介绍这个插件的,心想何不用这个试试. 不过园子里的这几篇文章用到的uploadify还是以前的旧版本uploadify-v2.1.0,我在官网上下载的是up

jQuery无刷新上传插件Uploadify的上传按钮不显示

使用的 免费的flash版本,电脑也有 flash player 的9.0.24版本以上 在浏览器上传按钮不能正常显示, 这是  因为浏览器禁止了flash , 需要开启flash , 例:使用的谷歌浏览器 未开启flash  是这个样子,需要开启flash 下面是一个方法 即可正常显示: 或者 打开 谷歌浏览器的设置 -  高级 - 内容设置- Flash - 允许网站运行Flash

C#_Jquery无刷新上传

昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说,把源代码一一照搬的复制.难道它不能移值至ASP.NET MVC应用程序吗?Insus.NET想了一下,源代码是html+ashx的,它一定能的. 网友发送能正常运行的代码给Insus.NET...... 重点的script文件:http://download.cnblogs.com/insus/M

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

[Asp.net mvc]jquery.form.js无刷新上传

写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jquery.form.js的插件实现. demo 首先通过nuget安装插件jquery.form.js 引入js文件 <script src="~/Scripts/jquery.form.min.js"></script> 前端调用的代码 @{ ViewBag.Titl

jQuery+AJAX实现网页无刷新上传

新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易.

理清fineuploader无刷新上传的一些事

1.fineuploader是一款不依赖与jquery的异步无刷新上传组件,fineuploader采用ajax方式实现对文件上传,返回值都是以json的格式,对后台服务器操作和前端dom对象一些操作代码集中在javascript脚本中,这样集成使fineuploader使用非常简单,使用的时候只需要添加(fineuploader-3.5.0.css)与(jquery.fineuploader-3.9.1.js)即可实现上传. 2.fineuploader也有自身的一些特点:1.支持文件上传进度