1.出现list not define时,var $list = $("#fileList");
2.选择文件框有延迟,可能是因为选择文件类型过多
mimeTypes: 'image/*'    改为    mimeTypes: 'image'
3.thumbnailWidth x thumbnailHeight 改为自己想要的尺寸
引入资源
使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
 
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
 
<!--SWF在初始化的时候指定,在后面将展示-->
文件上传
WebUploader只包含文件上传的底层实现,不包括UI部分。所以交互方面可以自由发挥,以下将演示如何去实现一个简单的版本。
请点击下面的选择文件按钮,然后点击开始上传体验此Demo。
Html部分
首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
初始化Web Uploader
具体说明,请看一下代码中的注释部分。
var uploader = WebUploader.create({
 
    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',
 
    // 文件接收服务端。对应你自己控制层模块的路径
    server: 'http://webuploader.duapp.com/server/fileupload.php',
 
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '#picker',
 
    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
    resize: false
});
显示用户选择
由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {                                                                               $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p class="state">等待上传...</p>' +
    '</div>' );
});
文件上传进度
文件上传中,Web Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传进度。
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');
 
    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }
 
    $li.find('p.state').text('上传中');
 
    $percent.css( 'width', percentage * 100 + '%' );
});
文件成功、失败处理
文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。
uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上传');
});
 
uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
});
 
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});
图片上传
与普通文件上传相比,此demo演示了:文件过滤,图片预览,图片压缩上传等功能。
Html
要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。
<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
Javascript
创建Web Uploader实例
// 初始化Web Uploader
var uploader = WebUploader.create({
 
    // 选完文件后,是否自动上传。
    auto: true,
 
    // swf文件路径
    swf: BASE_URL + '/js/Uploader.swf',
 
    // 文件接收服务端。
    server: 'http://webuploader.duapp.com/server/fileupload.php',
 
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    pick: '#filePicker',
 
    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',                                                                                 //
        mimeTypes: 'image/*'
    }
});
监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。
PS: 这里得到的是Data URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
        $img = $li.find('img');
 
 
    // $list为容器jQuery实例
    $list.append( $li );
 
    // 创建缩略图
    // 如果为非图片文件,可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
 
        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});
然后剩下的就是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress,uploadSuccess, uploadError, uploadComplete事件。
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress span');
 
    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
    }
 
    $percent.css( 'width', percentage * 100 + '%' );
});
 
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).addClass('upload-state-done');
});
 
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
        $error = $li.find('div.error');
 
    // 避免重复创建
    if ( !$error.length ) {
        $error = $('<div class="error"></div>').appendTo( $li );
    }
 
    $error.text('上传失败');
});
 
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').remove();
});

解决Web Uploader上传文件和图片 延迟和not defined的更多相关文章

  1. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  2. 数据採集之Web端上传文件到Hadoop HDFS

    前言 近期在公司接到一个任务.是关于数据採集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志採集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好近期都有在这方面 ...

  3. SpringMVC上传文件(图片)并保存到本地

    SpringMVC上传文件(图片)并保存到本地 小记一波~ 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multi ...

  4. 演示如何通过 web api 上传文件MVC40

    演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...

  5. 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

    原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...

  6. TP3.2批量上传文件(图片),解决同名冲突问题

    1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" meth ...

  7. 解决上传文件或图片时选择相同文件无法触发change事件的问题

    昨天在做一个上传文件的模块时遇到了这样的问题:打开文件一上传,上传成功后再次点击文件一,change事件无反应 <input type="file" name="f ...

  8. web uploader 上传大文件总结

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  9. app端上传文件至服务器后台,web端上传文件存储到服务器

    1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...

随机推荐

  1. mongodb基础学习8-复制集

    今天来简单学习一下复制集(replication),什么是复制集呢,类似于mysql的主从复制吧 简单来说就是有多个mongodb的实例,多个实例有相同的内容,其中一台用于读写,其它用于备份,当用于读 ...

  2. python 本地变量和全局变量 locals() globals() global nonlocal 闭包 以及和 scala 闭包的区别

    最近看 scala ,看到了它的作用域,特此回顾一下python的变量作用域问题. A = 10 B = 100 print A #10 print globals() #{'A': 10, 'B': ...

  3. 漫谈四种神经网络序列解码模型【附示例代码】 glimpse attention

    漫谈四种神经网络序列解码模型[附示例代码] http://jacoxu.com/encoder_decoder/ [视觉注意力的循环神经网络模型]http://blog.csdn.net/leo_xu ...

  4. 【Java】JVM(四)、虚拟机参数配置

    1. -Xms20M      JVM启动时候的内存大小为20M   2. -Xmx20M     JVM内存最大值是20M 将其与Xms大小一致可以避免JVM内存自动扩展   3. -Xss128K ...

  5. lrzsz的安装与配置

    1)下载http://freshmeat.sourceforge.net/projects/lrzsz/ 2)tar zxvf lrzsz-0.12.20.tar.gz 3)mv lrzsz-0.12 ...

  6. python,遍历文件的方法

    在做验证码识别时,识别时需要和库里的图片对比,找到最接近的那个图片,然后就行到了用与图片一致的字符命名,获取文件的名称,去将图片的名称读出来作为验证码.以下是我通过网上的资料总结的三种文件遍历的方式, ...

  7. sublimetext 2 编译文件带input时 提示 EOFError: EOF when reading a line

    昨天在网下下载了个什么sublimetxt 2 的破解版,然后让我折腾了半天,没错 ,就是因为这个 EOFError: EOF when reading a line错误让我搞的半死.怨自己,贪图中文 ...

  8. impulse···········

    impulse - Bing dictionary US['ɪm.pʌls]UK['ɪmpʌls] n.冲动:冲量:推动力:刺激 v.推动 网络脉冲:冲击 变形Plural Form:impulses ...

  9. 在Eclipse中配置Maven插件

    --------------------------siwuxie095                                     在 Eclipse 中配置 Maven 插件     ...

  10. Linked dylibs built for GC-only but object files built for retain/release for architecture x86_64

    编译开源Xcode 插件 SCXcodeSwitchExpander 源码地址: https://github.com/stefanceriu/SCXcodeSwitchExpander 编译环境:X ...