本文介绍了如何在Java脚本中从值文件输入复制到动态输入文件值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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 });
}

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

文件输出 从所有输入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

推荐答案

我尝试寻找新方法

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);
    }

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

08-04 07:33
查看更多