jQuery fileload上传文件-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jQuery fileload上传文件

简介: jquery fileupload上传文件
<!-- 这个你可以不引入,上传功能也是正常的,不过样式就很坑了。 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 这个你也可以不引入,如果你够个性的话。 -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
<!-- 这个在例子里面用的是google的链接,被墙了你懂的,所以只能用本地。 -->
<script src="js/jquery-1.11.1.js"></script>
<!-- 这个顾名思义,ui用的,不影响上传功能。但你还是得引入。 -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- 这个是比如得要的,你要知道,这个上传插件是以这个为基础的。 -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- 自不必说,这是库。 -->
<script src="js/jquery.fileupload.js"></script>
<!-- 你可以不引入,但是我告诉你,处理过程的信息是来自于它的。 -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- 你可以不引入,但是校验功能是这货做的 -->
<script src="js/jquery.fileupload-validate.js"></script>
  <script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    //'use strict';//使用严格的语法规则
   // alert("asdf");
    $('#fileupload').fileupload({
        inputid:'fileupload',//我要实例化哪个标签
        url: 'upload.jsp',//服务端的地址
        dataType: 'json',//数据格式,ajax你懂的
        acceptFileTypes: /(\.|\/)(apk|app|rar|zip|7z|tar|chm|png)$/i,//可上传的文件扩展名
        autoUpload: true,//是否选了文件就直接自动上传
        maxNumberOfFiles:1,//最多同时上传几个文件
        maxChunkSize:10000,//最大接收文件大小
        done: function (e, data) {//上传完了干嘛
        alert(data);
            $.each(data.result.files, function (index, file) {
                $('#'+data.inputid).prev('span').text('重新上传');
                $('#'+data.inputid).attr('value',file.url);
            });
        },
        progressall: function (e, data) {//上传过程中,隔段时间就会调起的回调函数,这个东西,主要是用来返回进度的,你看里面的引用,没错,它带回来的参数值,只有total、loaded这种数字。 
        var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress_'+$(this).fileupload('option', 'inputid')+' .progress-bar').css(
                'width',
                progress + '%'
            ).next('.progress-text').children('.progress-percent-text').text('上传进度:'+progress + '%');
        alert("progressall==  "+progress);
            $("#progress").find(".bar").css(
            'width',
                progress + '%'
            );
        },
        processalways:function (e, data) {//这货是干嘛的呢?就是上传之前调起的函数。没错,如果你选择了自动上传,那么当你点选完了文件,这个货就会被调起。
            $('#progress_'+$(this).fileupload('option', 'inputid')+' .progress-bar').css(
                'width',
                '0'
            ).next('.progress-text').children('.progress-filename-text').empty().next('.progress-percent-text').empty();
            
            $('#'+$(this).fileupload('option', 'inputid')).attr('value','').prev('span').text('上传文件');
            var index = data.index,
                file = data.files[index];
            var file_name=file.name.length > 8? file.name.substr(0, 3) + "..." + file.name.substr(file.name.length-5, 5) : file.name;
            $('#progress_'+$(this).fileupload('option', 'inputid')+' .progress-text .progress-filename-text').text(file_name);
            if (file.error) 
            {
                $('#error_'+$(this).fileupload('option', 'inputid')).children('p').text(file.error).css('color','#f60941');
            }
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');//不用猜了,就是看看是不是支持jqueryajax上传方式。就是上面说的那个frame东东。
});
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: