Question

我上传了图片。从filesialog中选择一些文件时，文件会添加到一个数组中，并且会向页面添加一个新的div容器。这个div容器包含图像和删除按钮。

var imageList = [];

$("document").ready(function () {
    var dlgImageUpload = $("#inputUpload"); // the input dialog
    dlgImageUpload.click(function(){this.value = '';}); // reset the value
    dlgImageUpload.change(function (input) { // new images selected
        $(input.target.files).each(function (imageIndex, currentImage) {
            if (currentImage.type.match('image.*')){ // just execute the code if the file is an image
                addNewImage(currentImage.name); // handle the array and create a new container
            }
        });
    });
});

function initializeImageList(){ // load images already existing (from server?)
    $(imageList).each(function (imageIndex) {
        createImageContainer(imageIndex);
    });
}

function addNewImage(fileName){ // add the new image to the list and create it at the first place in the DOM
    imageList.unshift(fileName);
    createImageContainer(0);
}

function createImageContainer(imageListIndex){ // create a new div container for the image
    var uploadContainer = $("<div></div>"); // the parent container
    uploadContainer.addClass("uploadContainer");
    $('#ImageListContainer').append(uploadContainer);
    $(uploadContainer).insertBefore($(".uploadContainer")[0]);

    var btnBar = $("<div></div>"); // containing the delete button and other ones
    btnBar.addClass("uploadBtnBar");
    uploadContainer.append(btnBar);

    var btnDelete = $("<button></button>"); // the button for deleting the current image
    btnDelete.addClass("btn btnDark btnDeleteImage");
    btnDelete.click(function () {
        imageList.splice(imageListIndex, 1);
        uploadContainer.remove();
    });
    btnBar.append(btnDelete);

    var uploadedImage = $("<div></div>"); // the image container itself with a background image
    $(uploadedImage).css("background-image", "url('Resources/" + imageList[imageListIndex] + "')");
    uploadedImage.addClass("uploadedImage");
    uploadContainer.append(uploadedImage);
}

#ImageListContainer{
    margin-top: 50px;
}

#inputUpload{
    margin-left: 20px;
}

.uploadContainer{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
}

.uploadContainer:hover .uploadBtnBar{
    display: block;
}

.uploadContainer:hover .uploadedImage{
    opacity: 0.3;
    transition: 1s;
}

.uploadedImage{
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: 1s;
}

.uploadBtnBar{
    position: absolute;
    z-index: 1;
    display: none;
    width: 100%;
    text-align: right;
    height: 32px;
}

.btnDeleteImage{
    width: 32px;
    height: 32px;
    background-image: url("../../Resources/deleteImageBtn.png");
    background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="imageUpload" class="contentPage">
    <input class="input" id="inputUpload" type="file" multiple>
    <div id="ImageListContainer"></div>
</div>

正如您在上面提到的示例中所看到的，找不到图像。所以写$(uploadedImage).css("background-image", "url('Resources/" + imageList[imageListIndex] + "')");

时

我的网址目前是错误的。我在此Resources文件夹中搜索现有图像。如何从我想要的地方上传图片？

我知道由于安全原因我无法读取文件的路径。但是我该如何解决这个问题？

其余的代码应该没问题，我只需要从所选文件中获取正确的URL。

按路径本地上传图像

0 个答案: