PDA

View Full Version : clear value of <input type="file"> ?


V@no
01-29-2003, 12:28 PM
I'm trying write a script that will check image dimmensions before it actualy uploaded to the server.
so far it works, exept after I click on "submit" button and image is too big it gives a popup message, as it supposed to, but still it continue uploading....
so, my idea was: if the image bigger then then allowed, the script chould clear value of "FILE" input, so basicaly there nothing to send to the server...I use ' document.all.INPUTFILE.value="" ' but it doesnt clear the value! it does for "TEXT" input or any others, but not for "FILE".
can someone help me with this?
thx!

brothercake
01-29-2003, 12:39 PM
You can't change the value in an FILE input, for obvious security reasons. If you want to limit the upload file size, you have to do that in your server-side script.

btw - off topic, but you really shouldn't be using the "all" collection; it is proprietary and highly inefficient; to access a form element through its ID, use document.getElementById("input_id"); to access a form element through it's NAME, use document.formname.elementname or document.forms["formname"]["elementname"];

Adam20002
01-29-2003, 12:45 PM
Can we see the code you are using for the uploading ?

Adam

V@no
01-29-2003, 04:25 PM
brothercake, thank you very much! I know almost nothing about javascript, just trying to combine the ones I can find...
but, as u said I should check sizes on serverside, that what I'm trying to avoid, because, if the file is big then u have to wait untill it uploaded then u get error message that it's too big...u know?

so far, the only way (probably the stupidest one also :rolleyes: ) I could figure out is if image size too big, then change FORM METHOD from POST to GET...(as I said its stupid) but it works 'almost' fine.

so, here is the code I have:
<SCRIPT language="JavaScript">
//-----------------check image size-------------------------
function getImageDimension (imgURL) {
var img = new Image();
img.onload = showImageDimensions //what is this? onload where?
if (document.layers
&& location.protocol.toLowerCase() != 'file:'
&& navigator.javaEnabled())
netscape.security.PrivilegeManager.enablePrivilege(
'UniversalFileRead'
);
img.src = imgURL;
}
function showImageDimensions () {
document.all.dim_width.value = this.width //will send width to the server
document.all.dim_height.value = this.height //will send height to the server
if (this.width > 500 || this.height > 500 && (this.width != 0 || this.height != 0)) {
/////////////////////////////////////
//document.all.abc.method = "get"
//document.all.media_file.value = ""
/////////////////////////////////////
}
}
function checkImageDimensions (fileName) {
var imgURL = 'file:///' + fileName;
getImageDimension(imgURL);
}
//------End check image size------------------------

//make sure name is not empty
function checkFields (){
if (document.all.image_name.value == "") {
//document.all.media_file.value = '12345';
//document.all.abc.method = "get"
alert('dont forget enter name');
}
}
</SCRIPT>
<FORM method="post" action="#" enctype="multipart/form-data" onsubmit="uploadbutton.disabled=true;" name="abc"><BR />
Name: <INPUT type="text" name="image_name" size="30" value="" class="input" /><BR />
File: <INPUT type="file" name="media_file" class="input" onChange="checkImageDimensions(this.form.media_file.value)"/><BR />
<INPUT type="hidden" name="dim_width" />
<INPUT type="hidden" name="dim_height" />
<INPUT type="submit" name="uploadbutton" value="send" class="button" onClick="checkFields();"/>
</FORM>

agresso
04-24-2009, 08:02 AM
You can find a good solution here.
Just one line Javascript function:
http://gusiev.com/?p=11

rnd me
04-24-2009, 08:49 PM
firefox3 doesn't provide the image path, so you can't check it like that from the value.

you can however, in forefox3, use the input's files[0] methods to either check the file size, or load the image from a dataurl.

IE might let you just load it from the local path...