Dynamically Set Value of a File Input

Dynamically set value of a file input

It is not possible to dynamically change the value of a file field, otherwise you could set it to "c:\yourfile" and steal files very easily.

However there are many solutions to a multi-upload system. I'm guessing that you're wanting to have a multi-select open dialog.

Perhaps have a look at http://www.plupload.com/ - it's a very flexible solution to multiple file uploads, and supports drop zones e.t.c.

How to copy from value file input to dynamic input file value in java scripts?

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

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,

Dynamically assigning a file to the file input field in a form

No. It is not possible to set File object at FileList object referenced by .files property of <input type="file"> element. FileList object is read only.

You can .append() one or more File objects to a FormData object and POST the FormData object to server. See How to work with FileList (from <input type="file">) in Javascript?

How to get value of input type = file and display it on a dynamically created image?

You can try this

<html>
<body>

<input type = file id = "fileUpload" accept = "image/*">
<button onclick = "displayImg()">Click to show</button>
<div id="container">
<img id="img"></div>

<script>
function displayImg() {
  let fileUpload = document.getElementById("fileUpload").value;
  //alert(fileUpload);
  let image = document.getElementById("img");
  img.src = fileUpload;

}
</script>

</body>
</html>

NOTE: The value property only returns the name of the file so the image should be located in the same folder as that of code.Or if you want to, you can add the path of the file before.

Dynamically Set Value of a File Input