Question

我有InsertProduct.aspx页面，用户可以在此页面中为其产品上传6张图片... 我想首先在页面上定义1个div，我在其上定义fileupload控件当用户点击Selectimage时，他们可以上传他们的第一张图片，当他们上传他们的第一张图片然后出现第二DIV 他们可以上传他们的第二张当他们上传第二张图像时，图像会出现第三个div，他们可以选择第三张图像，最多可以显示6张图像用户可以上传6张图片，他们可以删除上传的图片...

我该怎么做？

祝你好运

内达

Answer 1

你可以使用众多文件上传jQuery插件之一，但我认为实现这一点的最简单方法是使用HTML5 FileReader。

请查看此jsFiddle。（SO的演示无效，因为我还没有在这里找到ajax echo服务。也许我稍后会修复它。）

代码并不完美但它应该可以帮助您入门。

您可以改进/检查以下内容：

立即上传图片。目前，他们上传了全部上传按钮。
需要改进删除图像的处理。不会删除任何服务器图像，只会删除当前选定的图像。
先前上载的服务器映像的初始加载未实现。
上传需要相当长的时间，不确定我的文件是否太大。但你可以检查二进制json是否比base64编码图像更好/更快。
可以改进CSS样式。

(function () {
    var $app = $('#uploadApp');

    var formTemplate = function (id, handler) {

        $(document).on('change', '#file_' + id, handler);

        var $tmpl = $('<div/>').addClass('productPane').append([
        $('<h1/>').text('Image ' + id),
        $('<div/>').addClass('imageContainer'),
        $('<input type="file"/>').attr('id', 'file_' + id)]);
        return $tmpl.clone();
    };

    // Array Remove - By John Resig (MIT Licensed)
    Array.prototype.remove = function(from, to) {
      var rest = this.slice((to || from) + 1 || this.length);
      this.length = from < 0 ? this.length + from : from;
      return this.push.apply(this, rest);
    };
    
    var uploader = {
        imageCount: 0,
        MAX_IMAGES: 6,
        images: [],
        init: function () {
            this.addForm();
            $('#uploadAll').click(this.uploadAll.bind(this));
        },
        addForm: function () {
            this.imageCount++;
            $app.append(formTemplate(this.imageCount,
            $.proxy(this.upload, this)));
        },
        uploadAll: function () {
            if (this.images.length == 0) return; // nothing to upload
            
            var json_obj = {
                json: $.toJSON(this.images),
                delay: 1
            };
            
            Pace.track(function () {
                $.ajax({
                    async: true,
                    cache: false,
                    type: 'POST',
                    url: 'http://jsfiddle.net/echo/json/',
                    //jsonp: "callback",
                    data: json_obj,
                    dataType: 'json', //'jsonp',

                    success: function (data) {
                        console.log(data, 'images uploaded');

                        // just a test to show which images are uploaded
                        $('#debug').append('<h2>Uploaded images</h2>');
                        $.each(data, function (index, image) {
                            $('#debug').append($('<img/>')
                                .attr('src', image).width(50));
                        });
                    }
                });
            });
        },
        upload: function (evt) {
            //console.log(evt);
            evt.preventDefault();
            var that = this;
            var files = evt.target.files; // FileList object
            var curIndex = $(evt.target).attr('id').split('_')[1]
            var $productPane = $(evt.target).closest('.productPane');

            // files is a FileList of File objects. List some properties.
            // var output = [];
            //for (var i = 0, f; f = files[i]; i++) {
            f = files[0];
            var reader = new FileReader();
            reader.onload = function (evt) {
                var img = new Image();
                img.src = evt.target.result;
                img.width = 100;

                this.images[curIndex - 1] = evt.target.result;;
                var $curImg = $productPane.find('.imageContainer').html($(img));
                $productPane.append($('<button/>').text('remove')
                    .click(function () {
                    $curImg.empty(); // remove image
                    that.images.remove(curIndex - 1); // delete image from array
                    f = null; // clear current file object
                    $('#file_' + curIndex).val(''); // clear file input
                    $(this).remove(); // delete remove button 
                }));

            }.bind(this);
            reader.readAsDataURL(f);

            if (this.imageCount < this.MAX_IMAGES && $(evt.target).attr('id').split('_')[1] == this.imageCount) {
                // we can add one more image and user clicked on last input
                //console.log(this.imageCount);
                this.addForm();
            }
            
            // if you need file parameters here are some example properties
            /*output.push(escape(f.name), '(', f.type || 'n/a', ') - ',
                    f.size, ' bytes, last modified: ',
                    f.lastModifiedDate.toLocaleDateString());*/
            //}
            //$('#debug').append(output);
        }
    };
    uploader.init();

})();

.productPane {
    float: left;
    width: 200px;
    height: 250px;
}
.productPane h1 {
    font-size: 1.1em;
}
/*pacejs template follows here -- flash theme */

/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.pace-inactive {
    display: none;
}
.pace .pace-progress {
    background: #2299dd;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}
.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #2299dd, 0 0 5px #2299dd;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -moz-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    -o-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: solid 2px transparent;
    border-top-color: #2299dd;
    border-left-color: #2299dd;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes pace-spinner {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes pace-spinner {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-ms-keyframes pace-spinner {
    0% {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes pace-spinner {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>

<div id="uploadApp">
    <button id="uploadAll">Upload images</button>
    <br/>
</div>
<div id="debug"></div>
<script>
    window.paceOptions = {
        //minTime: 2000,
        //ghostTime:500,
        //startOnPageLoad:false,
        //target: '.test1'
    }
</script>
<script src="https://raw.github.com/HubSpot/pace/master/pace.js"></script>

出现图像逐个选择div

1 个答案: