jQuery fileload上传文件

<!-- 这个你可以不引入，上传功能也是正常的，不过样式就很坑了。 -->

<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>