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.
HTML
Out Side Form
<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="" />
In side form
@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 Code for set value, create and preview image
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# Code { In Server site (Server Code for get files) }
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 });
}
when submit form files not null but fileName is empty
File output Why File name is empty ?
Files output When submited form all input POST but Content Length equals 0 and FileName is Empty
**Summary My Quotation **
i try to find new way
Hold on hidden input Base 64 image stream then pass to server in server convert to Image type
jQuery and 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);
}
Problem in code: Must base 64 string substring or replace data:image/jpeg;base64,