如何在Java脚本中从值文件输入复制到动态输入文件值? [英] How to copy from value file input to dynamic input file value in java scripts?

问题描述

我有一个输入文件的多个选择文件，在输入文件的多个鸿沟动态输入文件选择文件时，并提交一个表单服务器.

I have a input file multiple choose file, when choosing files in input file multiple divide to the dynamic input file and submit a form to server.

1. 使用Asp.net MVC
2. 使用 HttpPostedFileBase f获取服务器中的所有文件 = form [key];
3. 使用js和jQuery

1. Use Asp.net MVC
2. Get all file in server by using HttpPostedFileBase f = form[key];
3. use js and jQuery

HTML

外部表格

<input type="file" name="files" id="files" onchange="readFile(this)" multiple accept="image/png, image/jpeg, image/jpg," capture class="file" style="display:none" value="" />

为副形式

@using (Html.BeginForm("EditImage", "Client", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <input type="hidden" id="id_client" name="id_client" value="@ViewBag.Client" />
    <div class="row">
        <div class="col-md-12">
            <div class="dropzone dz-clickable" onclick="document.getElementById('files').click()" id="imgZone">
                <div class="dz-default dz-message"><span>Click Here to choose file</span></div>
            </div>
        </div>
        <div class="col-md-12">
            <br />
            <div class="row">
                <div class="col-md-6"><p class="btn btn-danger btn-lg disabled btn-block" id="delete" onclick="Clear()">Clear</p></div>
                <div class="col-md-6"><input type="button" onclick="Send(this)" name="add" id="add" class="btn btn-success btn-lg disabled btn-block" value="Submit" /></div>
            </div>
        </div>
    </div>
}

用于设置值，创建和预览图像的jQuery代码

function readFile(input) {
    //CheckFileUpload(input.files.length)
    if (input.files && input.files[0]) {
        var img, inputID = 0;
        for (var i = 0; i < input.files.length; i++) {
            var reader = new FileReader();
            reader.onload = (function (f) {
                return function (e) {
                    console.table(f);
                    img = '<div class="dz-preview dz-processing dz-error dz-complete dz-image-preview">';
                    img += '    <input type="file" id="file_' + inputID + '" name="file_' + inputID + '" class="d-none" value="' + f + '" style="display:none" />';
                    img += '    <div class="dz-image shadow"><img data-dz-thumbnail="" class="w-100 h-100" alt="banner.jpg" src="' + e.target.result + '"></div>';
                    img += '    <div class="dz-details">';
                    img += '        <div class="dz-size"><span data-dz-size="">' + formatBytes(f.size) + '</span></div>';
                    img += '        <div class="dz-filename"><span data-dz-name="">' + f.type + '</span></div>';
                    img += '        <div class="mt-1 btn btn-danger btn-delete"><i class="fas fa-trash"></i></div>';
                    img += '    </div>';
                    img += '</div>';
                    $('#imgZone').append(img);
                    inputID++;
                }

            })(input.files[i]);
            reader.readAsDataURL(input.files[i]);
        }
    }
}

C#代码{在服务器站点中(用于获取文件的服务器代码)}

public ActionResult EditImage(long? id_client)
{
    //For testing
    //var filesRequest = Request.Files;
    //HttpPostedFileBase file = filesRequest["file_1"];

    var files = new HttpPostedFile[Request.Files.Count];
    Request.Files.CopyTo(files, 0);
    if (files == null)
        return RedirectToAction("Detail", new { id = id_client });
    if (files[0] != null)
        FileUpload(id_client, "~\\Documents\\Client\\boards\\", files);
    return RedirectToAction("ViewImage", new { id = id_client, camBack = false });
}

提交表单文件时不为空但fileName为空

when submit form files not null but fileName is empty

文件输出 为什么文件名为空?

文件输出 从所有输入POST提交时，但内容长度等于0，文件名为空

**我的报价摘要**

**Summary My Quotation **

1. 如何通过我的方式在服务器站点中归档文件(我的代码)?
2. 我不知道服务器站点或客户端站点中的问题！！
3. 没有问题，所有方式都将代码更改为新方式

1. How to files in server site by my way ( my code ) ?
2. I don't know problem in server site or client site !!!
3. no problem if any way and all change code for new way

推荐答案

我尝试寻找新方法

保留隐藏的输入 Base 64图像流，然后传递到服务器中的服务器，转换为 图像类型

Hold on hidden input Base 64 image stream then pass to server in server convert to Image type

jQuery和JS

function readFile(input) {
    CheckFileUpload(input.files.length)
    if (input.files && input.files[0]) {
        var img, inputID = 0;
        for (var i = 0; i < input.files.length; i++) {
            var reader = new FileReader();
            reader.onload = (function (f) {
                return function (e) {
                    //<input type="file" id="file_' + inputID + '" name="file_' + inputID + '" class="d-none" value="' + f + '" style="display:none" />';
                    var fileInput = $('<input/>')
                        .attr('type', "hidden")
                        .attr('name', 'file_' + inputID + '')
                        .attr('id', 'file_' + inputID + '')
                        .attr('value', e.target.result);
                    $('#imgZone').append(fileInput);
                    inputID++;
                }

            })(input.files[i]);
            reader.readAsDataURL(input.files[i]);
        }
    }

C#

var filesRequest = Request.Form;
    string file = filesRequest["file_1"];
    byte[] bytes = Convert.FromBase64String(file); // Replace file here
    System.Drawing.Image image;
    using (MemoryStream ms = new MemoryStream(bytes))
    {
        image = System.Drawing.Image.FromStream(ms);
    }

代码中的问题:必须基于64位字符串 substring 或 replace 数据: image/jpeg; base64，

Problem in code: Must base 64 string substring or replace data:image/jpeg;base64,

这篇关于如何在Java脚本中从值文件输入复制到动态输入文件值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！