jquery ajaxupload无刷新文件上传文件

 代码如下 复制代码

使用方法如下

<script type="text/javascript">

    $(function () {
        var button = $('#upload');
        new AjaxUpload(button, {
            action: '/upload/imagesAjaxUpload',
            name: 'upload',
            onSubmit: function (file, ext) {
                if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
                    alert('图片格式不正确,请选择 jpg 格式的文件!', '系统提示');
                    return false;
                }

                // change button text, when user selects file
                button.text('上传中');

                // If you want to allow uploading only 1 file at time,
                // you can disable upload button
                this.disable();

                // Uploding -> Uploading. -> Uploading...
                interval = window.setInterval(function () {
                    var text = button.text();
                    if (text.length < 10) {
                        button.text(text + '...');
                    } else {
                        button.text('上传中');
                    }
                }, 200);
            },
            onComplete: function (file, response) {
                window.clearInterval(interval);
  
                // enable upload button
                this.enable();
  var json = eval('(' + response + ')');
  button.text('选择文件');
  $(".qr").css("display","inline");
  $(".qr>img").attr("src",json.file_name);
  $("input[name='wechat_qr']").val('/uploads/qr/'+json.file_name);
  //alert(json.file_name);
  //$("#ajaximg").html("<img src='/uploads/qr/"+json.file_name+"' />");
  //$("#wechat_qr").val('/uploads/qr/'+json.file_name);
            }
        });

    });
</script>

时间: 2024-11-08 18:20:29

jquery ajaxupload无刷新文件上传文件的相关文章

JQUERY AJAX无刷新异步上传文件

AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery Form Plugin  官网地址:http://malsup.com/jquery/form/#tab7   基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用 http://www.cnblogs.com/wuhuacong/p/3343967.html

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

jQuery Ajax使用FormData对象上传文件的方法_jquery

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

jQuery插件ajaxfileupload.js实现上传文件_jquery

AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML上传文档:  <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam

JQuery插件ajaxfileupload.js异步上传文件实例_jquery

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例_php实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

jQuery插件ajaxFileUpload实现异步上传文件效果_jquery

ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url   上传处理程序地址. 2,fileElementId   需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,scri

jquery插件-使用Jqeury.Fileupload上传文件, 在.net mvc中怎么使用?

问题描述 使用Jqeury.Fileupload上传文件, 在.net mvc中怎么使用? 我现在想用Jqeury.Fileupload 在.net mvc项目中上传文件, 但是对Jqeury.Fileupload 插件用法不了解,看了官方给的示例代码, 示例性实在不敢恭维(可能是我理解能力差),求会用的大侠给贴个小Demo代码

mvc file控件无刷新异步上传操作源码_实用技巧

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传类的封装,html input控件file处理和后台controller的调用. 上传封装类: 此类主要两个功能,一些简单的筛选和文件重命名操作. 文件的筛选包括: 文件类型,文件大小 重命名: 其中默认为不进行重命名操作,其中重命名默认为时间字符串DateTime.Now.ToString("yy

IE8 文件上传文件为空的问题

今天在使用之前做的应用系统时发现原来能使用的文件上传今天突然不能使用了,换了浏览器试了下原来是IE8的问题,firefox.chrome倒是没有这种问题,网上查了下原来又是IE8的问题,真是崩溃了... IE8基于安全的考虑,文件上传只允许鼠标的点击触发文件浏览及上传.如果是通过js触发的文件浏览就会导致上传失败(默认的input[type=file]的样式太差,与现有系统不一致,所以大多系统开发时会使用自定义的浏览按钮通过js调用原input[type=file]的onclick或者oncha