Question

使用文件上传控制器浏览图像，所选图像应作为图像缩略图在页面中预览。设计很敏感。

alter table my_table modify column my_col tinyint;

以下是我使用的代码，

<input type="file" id="imageSelector" multiple="multiple" />

我添加了一个复选框来选择图像。在单击页面中的“下一步”按钮时，所选图像应保存到sessionStorage，以便我可以在下一页中访问它。

var uploadImageCtrl = document.querySelector('#imageSelector');
uploadImageCtrl.addEventListener('change', function () {
    var files = this.files;
    for(var i=0; i<files.length; i++){
        createImageGrid(this.files[i]);
    }
}, false);  


function createImageGrid(imageFile) {
   // Using FileReader to display the image content
   var imageReader = new FileReader();
   var id;

    imageReader.onload = function (e) {
        id = "image" + ($("#grid > div").length + 1);
        var imgGridHTML = '';
        gridHTML += '<div class="post-box col-lg-2 col-sm-2 col-xs-4"> <img class="img-responsive img-thumbnail" value="' + id + '" ';
        gridHTML += ' src="' + e.target.result + '">';

        gridHTML += '<div class="editCheckContainer">';

        gridHTML += '<input type="checkbox" value="' + id + '" name="imageCheck" pull-right"> </div> </div>';

        $(gridHTML).appendTo("#grid");
        imgGridHTML = '';       
    }
    imageReader.readAsDataURL(imageFile);
}

但是图像数组没有被保存。任何人都可以建议这里的问题或另一种方法吗？

...谢谢

将上传的图像保存到会话存储Javascript

0 个答案: