js上传文件到apicloud

<script type='text/javascript'>
            var appid = 'A6080889043804';
            var appkey = 'CE42DDAD-F8AE-0616-D327-2B59700ED55D';
            var now    = Date.now();
            appkey = SHA1(appid + "UZ" + appkey + "UZ" + now) + "." + now;

        jQuery(function() {//这个只是放在里面好管理而已，不放也可以。不过多个上传插件最后这样，不然变量定义麻烦
                var $ = jQuery,
                        $list = $('#thelist'),
                        $btnUpdata = $('#ctlBtn1'),
                        // 优化retina, 在retina下这个值是2
                        ratio = window.devicePixelRatio || 1,
                        thumbnailWidth = 100 * ratio,
                        thumbnailHeight = 100 * ratio,
                        pickIdName = "#picker1",
                        uploadurl;

                uploadurl = WebUploader.create({
                        //pick: pickIdName, // 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: {
                                id: pickIdName,
                                innerHTML: '点击选择图片'
                        },
                        swf: '../scripts/Uploader.swf', // swf文件路径
                        server: 'http://d.apicloud.com/mcm/api/file', // 文件接收服务端。
                        resize: false, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                        auto: true, //自动上传无需点击
                        //accept: {// 只允许选择图片文件。
                        //         title: 'Images',
                        //         extensions: 'gif,jpg,jpeg,bmp,png',
                        //         mimeTypes: 'image/*'
                        // }
                });
                uploadurl.on('uploadBeforeSend', function(block, data, headers) {
                        headers["X-APICloud-AppKey"] = appkey;
                        headers["X-APICloud-AppId"] = appid;
                });
                 uploadurl.on("fileQueued", function(file) {
                        var $li = $('<div id="' + file.id + '" class="item">' +
                                '<img>' +
                                '<h4 class="info">' + file.name + '</h4>' +
                                '<p class="state">等待上传...</p>' +
                                '</div>');
                        var $img = $li.find('img');

                        $list.append($li)

                        // 创建缩略图
                        // 如果为非图片文件，可以不用调用此方法。
                        // thumbnailWidth x thumbnailHeight 为 100 x 100
                        uploadurl.makeThumb(file, function(error, src) {
                                if (error) {
                                        //$img.replaceWith('<span>不能预览</span>');
                                        return;
                                }
                                $img.attr('src', src);
                        }, thumbnailWidth, thumbnailHeight);


                        uploadurl.option('formData', {
                                filename: file.name, //新文件名
                                type: file.type //文件类型
                        });
                });
                //文件上传成功
                uploadurl.on('uploadSuccess', function(file, res) {
                    if (res && res.id) {
                                alert(res.url);
                                $('#' + file.id).find('p.state').text('已上传');
                        } else if (res && res.status == 0) {
                                alert("失败" + JSON.stringify(res))
                        } else {
                                alert("失败")
                        }
                });
                //文件上传失败
                uploadurl.on('uploadError', function(file, reason) {
                        $('#' + file.id).find('p.state').text('上传出错');
                });
                //上传完成，不管成功失败
                uploadurl.on('uploadComplete', function(file) {
                        $('#' + file.id).find('.progress').fadeOut(); //方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
                        uploadurl.removeFile(file, true);
                });
                //上传中
                uploadurl.on('uploadProgress', function(file, percentage) {
                        //$('#uploaderInfo').html(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 class="remove-this">X</div>' +
                                        '</div>').appendTo($li).find('.progress-bar');

                                $li.on('click', '.remove-this', function() {
                                        uploadurl.removeFile(file, true);

                                        $list.find('div#' + file.id + '').replaceWith('');
                                })
                        }
                        $li.find('p.state').text('上传中');
                        $percent.css('width', percentage * 100 + '%');

                });

                var state = '';
                uploadurl.on('all', function(type) {
                        if (type === 'startUpload') {
                                state = 'uploading';
                        } else if (type === 'stopUpload') {
                                state = 'paused';
                        } else if (type === 'uploadFinished') {
                                state = 'done';
                        }

                        if (state === 'uploading') {
                                $btnUpdata.text('暂停上传');
                        } else {
                                $btnUpdata.text('开始上传');
                        }
                });
                $btnUpdata.on('click', function() {
                        if (state === 'uploading') {
                                uploadurl.stop(true);
                        } else {
                                uploadurl.upload();
                        }
                });
        });
</script>