欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

swfupload-jquery-plugin 总结

美国西岸机房 发布于 2014-03-14  
jquery教程
前面用AjaxFileUploader做为上传插件,用是很好用,但是有个问题是,不能跨域上传文件,这个很郁闷,公司的上传组件是单独开一个工程来做的,做为一个单独的模块,不能跨域,即所有的上传都不能,后面用这个swfupload上传插件来解决这个问题,它是基于flash上传的,前面的那个是用iframe上传的,不同,下面说下详细用法。
1.导入js库
<script type="text/javascript" src="script/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="vendor/swfupload/swfupload.js"></script>
<script type="text/javascript" src="src/jquery.swfupload.js"></script>
2.具体实现
$(function(){
    $('#swfupload-control').swfupload({
        upload_url: "http://192.168.1.146:8080/Upload/api/up.do?type=4",
        file_size_limit : "10240",
        file_types : "*.*",
        file_types_description : "All Files",
        file_upload_limit : "0",
        flash_url : "../vendor/swfupload/swfupload.swf",
        button_image_url : '../vendor/swfupload/XPButtonUploadText_61x22.png',
        button_width : 61,
        button_height : 22,
        button_placeholder : $('#button')[0],
        debug: true,
        custom_settings : {something : "here"}
    })
        .bind('swfuploadLoaded', function(event){
            $('#log').append('<li>Loaded</li>');
        })
        .bind('fileQueued', function(event, file){
            $('#log').append('<li>File queued - '+file.name+'</li>');
            // start the upload since it's queued
            $(this).swfupload('startUpload');
        })
        .bind('fileQueueError', function(event, file, errorCode, message){
            $('#log').append('<li>File queue error - '+message+'</li>');
        })
        .bind('fileDialogStart', function(event){
            $('#log').append('<li>File dialog start</li>');
        })
        .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
            $('#log').append('<li>File dialog complete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').append('<li>Upload start - '+file.name+'</li>');
        })
        .bind('uploadProgress', function(event, file, bytesLoaded){
            $('#log').append('<li>Upload progress - '+bytesLoaded+'</li>');
        })
        .bind('uploadSuccess', function(event, file, serverData){
            $('#log').append('<li>Upload success - '+file.name+'</li>');
        })
        .bind('uploadComplete', function(event, file){
            $('#log').append('<li>Upload complete - '+file.name+'</li>');
            // upload has completed, lets try the next one in the queue
            $(this).swfupload('startUpload');
        })
        .bind('uploadError', function(event, file, errorCode, message){
            $('#log').append('<li>Upload error - '+message+'</li>');
        });
   
});   
</script>
这里是带了debug信息的,还打印了log,注意各个事件响应的时机。uploadSuccess方法里,是上传成功后响应的事件,serverdata是返回来的数据,在这里你可以解析,我的返回来的是xml.  upload_url是上传的地址。
3。html代码
<div id="swfupload-control">
    <ol id="log"></ol>
    <input type="button" id="button" />
</div>
后面的响应函数你可以自己去掉些.就这么点,不过我这个上传是有点丑,就一个按钮,你可以到网上搜下有更好的!

到零度科技查看原文:http://www.ldisp.com/a/jquery/2014/2695.shtml

上一篇:jquery.uploadify插件实现图片上传和预览效果
下一篇:jQuery.extend 函数详解

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理