javascript写上传文件的相关内容

最新推荐文章于 2023-10-06 18:03:41 发布

Isleta_

最新推荐文章于 2023-10-06 18:03:41 发布

阅读量244

点赞数

分类专栏： methods 文章标签： javascript input type file

本文链接：https://blog.csdn.net/Isleta_/article/details/88429089

版权

methods 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

实现功能：

上传文件
显示上传文件的文件名称
删除不想要的上传文件

html代码：

<div class="row removeMarginBottom">
                    <div class='col-lg-2 col-lg-offset-3 col-xs-offset-1 problem-describe'>问题截图：</div>
	                    <a class="btn btn-default btn-sm col-lg-offset-3 col-xs-offset-4 upload" id="pickfiles-problem">
	                        <span id="pickfilesText-problem">上传文件</span>
	                        <input class="btn btn-default btn-sm col-lg-offset-3 upload upload-file" type="file" id="problemInput" multiple="multiple">
	                    </a>                    
                </div>
                <div class="row">
                    <div id="filelist-problem" class='col-lg-offset-3 col-lg-6'></div>
                </div>

css代码：

.upload {
        position: relative;
        padding: 3px 18px;
        color: #9a373d;
        border: 1px solid #9a373d;
    &:hover {
         text-decoration: none;
     }
    }
    .upload-file {
        height: 40px;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }
    #cover-img {
        max-width: 100px;
        max-height: 100px;
    }

js代码：

var form = document.getElementById("issue-submit");
    var data = new FormData(form);
    $.each(problemFiles, function (index, item) {
        data.append("issue_file[]", item)
    });


var problemFiles = {};


$("#problemInput").on("change", function () {
    var obj = document.getElementById("problemInput");
    var length = obj.files.length;
    str = '';
    for (var i = 0; i < length; i++) {
        id = hex_md5(obj.files[i].name + obj.files[i].lastModified.toString() + obj.files[i].size.toString());
        if (!problemFiles[id]) {
            problemFiles[id] = obj.files[i];
            str += '<li class="extraADD" id="' + id + '">' + obj.files[i].name + '<span onclick="removeFile(\'' + id + '\',problemFiles)" class="glyphicon glyphicon-trash"></span></li>'
        }
    }
    $("#filelist-problem").append(str);
    // addArr(problem,file.id,res.data.url)
    $('#pickfilesText-problem').text('继续上传');
});

function removeFile(id, varname) {
    delete varname[id];
    $('#' + id).remove();
}