Question

我编写用于在我的数据库中上传多个文件的代码，它是可行的，但我找不到将文件添加到列表的方法，而不删除列表中的文件。每当我选择新文件时，我都会删除旧文件。

我用：

<input type="file" id="i_file" name="file[]" accept="image/*" multiple="multiple" style="display: none;" />

就像我说这是有效的，但问题是我希望用户可以选择文件1.jpg和2.jpg，而不是关闭打开对话框，然后再次打开并加载{{1}在某些列表中，3.jpg，1.jpg，2.jpg不仅3.jpg（现在就是这种情况）。

这是可能的吗？

TNX

Answer 1

检查此示例： -

将加载所选文件预览的Div标记。

<input type="file" multiple="true" id="fUpload" />
<div id="file-list"></div>

Jquery文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        //we apply an event to automatically list of files when the user select the files
        // the files will be built inside a table that includes the file name, size and the upload status.
        $("input#fUpload").change(function () {
            var fileList = "";
            if ($(this).prop("files").length > 0) {
                fileList  = "<table class=\"table-upload\" cellpadding=\"0\" cellspacing=\"0\">";
                fileList  = "<tr class=\"header-row\">";
                fileList  = "<td class=\"header-filename\">File Name</td>";
                fileList  = "<td class=\"header-filesize\">Size</td>";
                fileList  = "<td class=\"header-status\">Status</td>";
                fileList  = "</tr>";
                for (i = 0; i < $(this).prop("files").length; i++  ) {
                    fileList  = "<tr id=\"row-file" + i + "\" class=\"row-file\">";
                    fileList  = "<td class=\"row-filename\">" +  $(this).prop("files")[i].name   "</td>";
                    fileList  = "<td class=\"row-filesize\">" +  ($(this).prop("files")[i].size / 1048576).toFixed(2) +  " MB</td>";
                    fileList  = "<td id=\"row-status" + i + "\" class=\"row-status\">&#160;</td>";
                    fileList  = "</tr>";
                }
                fileList  = "</table>";
            }

            if (fileList.length > 0) {
                $("#file-list").html(fileList);
                $("#file-list").slideDown();
            }

            for (i = 0; i < $(this).prop("files").length; i++  ) {
                uploadImage(i);
            }
        });
    });

    //This will be the function to post image to generic handler
    //the parameter position will be used to identify which image file is going to be upload
    function uploadImage(position) {
        //we include a random number just to make sure it is unique and not cache.
        var randomnumber = Math.floor(Math.random() * 10001);

        //we use the FormData object to build the file uploads
        var form_data = new FormData();
        var objFiles = $("input#fUpload").prop("files");
        form_data.append("file", objFiles[position]);

        //we set the status saying the site is currently uploading the file. Note: you can remove the image ajax animated loading if you do not have it and just leave the text information base only. Make sure you set the URL for the generic handler path correctly.
        $("#row-status"   position).html("<img src='ajax-loading.gif'/> Uploading..");
        $.ajax({
            url: "/uploadhandler.ashx?rdm=" + randomnumber,
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,
            type: 'post',
            success: function (response) {
                //if the post is success it will go here
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //if there is an error it will be here
                //to display an error message you can use xhr.responseText
            },
            complete: function () { 
                //Once the call to generic handler is complete, this will be called.
                //In this case, we want tell the user that the upload is completed.
                $("#row-status"   position).html("Completed"); 
            }
        })
    }

</script>

CSS： -

<style type="text/css">
.table-upload
{
    min-width:350px;
    border-top:solid 1px #ccc;
    border-left:solid 1px #ccc;    
}

.table-upload td
{
    padding:5px 10px;
    border-right:solid 1px #ccc;
    border-bottom:solid 1px #ccc; 
}

.header-row{
    background:#606264;
    height:30px;
    line-height:30px;
    color:#fff;
}
</style>

将接受任何已发布文件的简单通用处理程序：

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string pathSave = context.Server.MapPath("/temp");
        if (!Directory.Exists(pathSave)) {
            try {
                Directory.CreateDirectory(pathSave);
            } catch {
            }
        }
        for(int i = 0; i < context.Request.Files.Count; i++  ){
            HttpPostedFile objHttpPostedFile = (HttpPostedFile)context.Request.Files[i];
            objHttpPostedFile.SaveAs(string.Concat(pathSave, "/", objHttpPostedFile.FileName));
        }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

将多个文件上传到列表而不刷新其他文件

1 个答案: