I used to use this method to upload a file without refresh the page:
AJAX file upload tutorial
and it works fine, but now I need to upload multi files through multi input fields, something like that:
Personal Photo: <input name="myfile1" type="file" />
Certificate1 Image: <input name="myfile2" type="file" />
Certificate2 Image: <input name="myfile3" type="file" />
so how can I do that without re-write startUpload, and stopUpload function with a new title "like startUpload2, and stopUpload2 for 'myfile2' input, and another for myfile3... etc"?
The enctype="multipart/form-data" on your form will allow for multiple file uploads. For those functions you refer to, you will either have to loop through the inputs and apply the functions to each input or apply a slightly different function to the form itself.
Related
I am using the Dropify jQuery plugin for attachment but I am unable to add multiple attachments at the same time. I am using it in ASP.Net MVC5. Here is my code
<input type="file" id="MemberImage" name="MemberImage" class="dropify" data-default-file="#Model.MemberImage" data-height="230" />
$('.dropify').dropify();
Write multiple in Your Tag
<input type="file" id="MemberImage" name="MemberImage" class="dropify" data-default-file="#Model.MemberImage" data-height="220" multiple/>
Notes:
Dropify displays only one image of the selected
I have a file input and I need to clear it after file is uploaded. I tried setting null value to v-model, but it generated the following error
File inputs are read only. Use a v-on:change listener instead.
My code is
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
How can I clear the file input in vue.js after upload so that I can upload the same file multiple times continuously
Solved it using the ref attribute,
this.$refs.fileInput.value = null;
You are using v-on:change="uploadFile" and guessing that your uploadFile has a success callback.
You can do the following:
Wrap your input in a form and add a ref attribute to your form:
<form ref="myFileInputForm">
<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
</form>
In your successful callback uploadFile do this:
this.$refs.myFileInputForm.reset();
File inputs are read only.
don't bind on element, remove v-model="file"
Hi I am using Jquery plug in jquery.MultiFile.pack.js . usage of this plug in requires input form element to be of class "multi"
<input id="preview" class="multi" name="preview[]" type="file" />
I am adding form elements dynamically from a PHP script. Multi file upload is not working when the elements are added dynamically, but works when element is allready present directly in the .
My question is how do I make this multi file upload to work. I tried to add class "multi" to the elements usng "on" as below, but it is not working.
$('input:file').on('click',function(){
$('#preview').addClass("multi");
});
For an HTML file input to accept a multiple file selection, you have to add it the multiple property :
<input id="preview" class="multi" name="preview[]" type="file" multiple/>
I wonder if there is a way of checking correct fileformat and size of an image using javascript?
I have a signup form and it is mandatory to upload an image before using the application:
<form action='signUp.php' method POST>
choose your image: <input type='file'></input>
</form>
You won't be able to check the file size with just javascript, but you should be able to check the file format of the file selected by simply grabbing the value of that input field and grabbing the last part. Like so, say you have this tag in your HTML:
<input type="file" id="afile" />
In your javascript you could have a function like this, and refer to it when the form is submitted:
function check_filetype(){
var filename = document.getElementById('afile').value;
return filename.substr(filename.lastIndexOf('.'));
}
I need to obtain the String for the file that is being uploaded from forms to store in the database.
I am using the usual form input file element
input type="file" name="some_name"
I found a couple JS scripts that allow me to do useless things like display the string in a dialog box, etc.
I need this as an element on the request object or as a hidden field on my page when the form is posted.
You should be able to do something like this:
<form method="POST">
<input type="file" name="some_name"
onchange="document.getElementById('hidden_file').value = this.value;" />
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
I believe that will work in all browsers if you simply want to store the filename, and not the full path.
You won't get a very useful value. Some browsers will only give you the final name part of the file path, while IE will give you a path with a bogus directory name.
I think that the "safe" fragment of the file name should already be passed in to you as part of the part header in the multipart post body.