图片上传到又拍云

<div class="panel-body form-inline">
                <div class="col-sm-10">
                    <div id="div_product_img" style="float: left; margin-top: -10px;">
                        {% for product_image in product.get_product_images %}
                            <div style="float: left;margin-right: 10px;width: 100px;height: 100px;margin-top: 10px;">
                                <a href="{{ MEDIA_URL }}{{ product_image.img }}" target="_blank">
                                    <img class="img-thumbnail" src="{{ MEDIA_URL }}{{ product_image.img }}!p3" alt="九宫图"
                                         style="width: 100%;height: 100%;">
                                </a>
                                <input type="hidden" name="product_img" value="{{ product_image.img }}">
                                <input type="hidden" name="hash" value="{{ product_image.imagehash }}">
                                <div class="product_close" onclick="$(this).parent().remove()"><span
                                        class="glyphicon glyphicon-remove"></span></div>
                            </div>
                        {% endfor %}
                    </div>
                    <div class="progress active hidden progress-img clear-both" style="margin-bottom: 10px;">
                        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                             aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                            <span>图片上传中，请等待图片上传完成后再保存产品</span>
                        </div>
                    </div>
                    <div class="clear-both" style="margin-top: 10px;">
                        <input type="file" class="form-control hidden" id="id_check_img" multiple="multiple">
                        <input type="button" class="btn btn-success btn-xs" value="添加图片"
                               onclick="$('#id_check_img').trigger('click')">
                        <span class="help-block"
                              style="display: inline-block">&nbsp;&nbsp;注：按住Ctrl键可以多选<span style="color: red;">每张图片不得超过500KB</span>。</span>
                    </div>
                </div>
        </div>



$("#id_check_img").change(function () {
        var upload_num = 0;


        var has_more = false;
        var raw_files = $(this).prop('files');

        var files = [];
        for (var i = 0; i < raw_files.length; i++){
            var file_data = raw_files[i];
            if (file_data.size / 1024 > 500) {
                showMsg("其中有图片尺寸太大不予上传，请上传小于500K的图片");
                continue;
            }
            files.push(file_data);
        }
        if (files.length == 0){
            return;
        }

        var files_length = files.length;
        if ($("#div_product_img img").length + files_length > 9) {
            has_more = true;
            files_length = 9 - $("#div_product_img img").length;
        }

        $(".progress-img").removeClass("hidden");
        for (var i = 0; i < files_length; i++) {
            var file_data = files[i];
            var formData = new FormData();
            var csrf_token = "{{ csrf_token }}";
            var MEDIA_URL = "{{ MEDIA_URL }}";

            var policy = "{{ policy }}";
            var signature = "{{ signature }}";
            var upan_upload_url = "{{ upan_upload_url }}";
            formData.append("file", file_data);
            formData.append("policy", policy);
            formData.append("signature", signature);

            $.ajax({
                url: upan_upload_url,
                cache: false,
                data: formData,
                contentType: false,
                processData: false,
                type: 'post',
                success: function (data) {
                    var result = JSON.parse(data);
                    console.log(result.url)
                    if (result.code == 200) {
                        console.log("上传又拍云成功")
                        var html = '<div style="float: left;margin-right: 10px;width: 100px;height: 100px;margin-top: 10px;">\
                                  <a href="' + MEDIA_URL + result.url + '" target="_blank">\
                                <img class="img-thumbnail"  src="' + MEDIA_URL + result.url + '!p3" alt="认证图片"\
                                     style="width: 100%;height: 100%;"></a>\
                                <input type="hidden" name="product_img" value="' + result.url + '">\
                                <input type="hidden" name="hash" value=""/>\
                                <div class="product_close" onclick="$(this).parent().remove()"><span class="glyphicon glyphicon-remove"></span></div>\
                            </div>';
                        $("#div_product_img").append(html);
                    } else {
                        console.log("上传又拍云失败")
                        showMsg(result.msg);
                    }
                },
                complete: function () {
                    upload_num++;
                    $(".progress-img span").html("图片上传中 " + upload_num + "/" + files_length + " ，请等待图片上传完成后再保存");
                    if (upload_num == files_length) {
                        $(".progress-img").addClass("hidden");
                        $("#id_product_img").val("");
                    }
                }
            });
        }

        if (has_more) {
            alert("九宫图最多只能添加9张，多余的图片将不再上传。");
        }
    });