HTML - File Upload Help
Hi Guys and Gals!
Looking for a little help on this one... I use a service that allows me to upload up to 20 photos to each of my work orders. The upload screen is set up with 20 seperate "Browse" lines (1 for each photo). I have requested that the page be recoded to accept a range of photos in a single "Browse" line, as opposed to one line for each. This would really cut down on the "clicking time" involved in attaching photos to an order. Heres my problem...they tell me that it cant be done, and blame it on Internet Explorer capabilities or lack of... Is this true? And if so, does IE version 7 support this functionality? Here is the current code from the upload screen: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>Attach Files to a Workorder</title> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <style type="text/css"> BODY { BACKGROUND-COLOR: linen; TEXT-ALIGN: center } </style> <script language="javascript"> <!-- function ConfirmDelete(filename){ var CompleteDelete = confirm("Are you sure you want to delete "+filename+"?"); if(CompleteDelete == true){window.location='MultipleFileUploads.aspx?id=123553&action=delete&filename='+filename} else{return false} } //--> </script> </HEAD> <BODY TEXT="1"> <div id="MultipleFileUploadForm"> <H3>Attachment Upload</H3> <div id=notesholder align=center style="text-align:left;width:600px;"> <UL> <LI> The files you upload here will not show as uploaded until you save your changes to the order. <LI> You cannot upload a file that is larger than 1MB <LI> All images that have a file size larger than 75KB will be automatically resized <LI> All images that have either a width or height greater than 640px will be resized proportionately <LI> All bitmap files will automatically be converted to JPGs <LI> All files will be renamed in the following format. ([Lastname]_[Firstname]_[JobNumber]_##.[extension]) </LI> </UL> </div> <form name="Form1" method="post" action="MultipleFileUploads.aspx?id=123553&Fname=Kracht&Lname=Jennifer&JobNum=1246607" id="Form1" enctype="multipart/form-data"> <input type="hidden" name="__VIEWSTATE" value="dDwtMzA1MTQwMjgyO3Q8O2w8aTwwPjtpPDE+Oz47bDx0PDtsPGk8MD47aTwyPjs+O2w8dDxAMDw7Ozs7Ozs7Ozs7Pjs7Pjt0PEAwPDs7Ozs7Ozs7Ozs+Ozs+Oz4+O3Q8cDxwPGw8VmlzaWJsZTs+O2w8bzx0Pjs+Pjs+O2w8aTwxPjs+O2w8dDw7bDxpPDA+O2k8MT47aTwyPjtpPDM+Oz47bDx0PEAwPHA8cDxsPERhdGFLZXlzO18hSXRlbUNvdW50Oz47bDxsPD47aTwyMD47Pj47Pjs7Ozs7Ozs7PjtsPGk8MD47aTwxPjtpPDI+O2k8Mz47aTw0PjtpPDU+O2k8Nj47aTw3PjtpPDg+O2k8OT47aTwxMD47aTwxMT47aTwxMj47aTwxMz47aTwxND47aTwxNT47aTwxNj47aTwxNz47aTwxOD47aTwxOT47PjtsPHQ8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTpcPC90ZFw+XDx0ZCBjb2xzcGFuPSIyIiBhbGlnbj0icmlnaHQiXD5cPGlucHV0IHR5cGU9ZmlsZSBuYW1lPWZpbGUgc3R5bGU9IndpZHRoOjQwMCIgaWQ9ZmlsZVw+Oz47Oz47Pj47dDw7bDxpPDA+Oz47bDx0PEA8RmlsZSAyOlw8L3RkXD5cPHRkIGNvbHNwYW49IjIiIGFsaWduPSJyaWdodCJcPlw8aW5wdXQgdHlwZT1maWxlIG5hbWU9ZmlsZSBzdHlsZT0id2lkdGg6NDAwIiBpZD1maWxlXD47Pjs7Pjs+Pjt0PDtsPGk8MD47PjtsPHQ8QDxGaWxlIDM6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgNDpcPC90ZFw+XDx0ZCBjb2xzcGFuPSIyIiBhbGlnbj0icmlnaHQiXD5cPGlucHV0IHR5cGU9ZmlsZSBuYW1lPWZpbGUgc3R5bGU9IndpZHRoOjQwMCIgaWQ9ZmlsZVw+Oz47Oz47Pj47dDw7bDxpPDA+Oz47bDx0PEA8RmlsZSA1Olw8L3RkXD5cPHRkIGNvbHNwYW49IjIiIGFsaWduPSJyaWdodCJcPlw8aW5wdXQgdHlwZT1maWxlIG5hbWU9ZmlsZSBzdHlsZT0id2lkdGg6NDAwIiBpZD1maWxlXD47Pjs7Pjs+Pjt0PDtsPGk8MD47PjtsPHQ8QDxGaWxlIDY6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgNzpcPC90ZFw+XDx0ZCBjb2xzcGFuPSIyIiBhbGlnbj0icmlnaHQiXD5cPGlucHV0IHR5cGU9ZmlsZSBuYW1lPWZpbGUgc3R5bGU9IndpZHRoOjQwMCIgaWQ9ZmlsZVw+Oz47Oz47Pj47dDw7bDxpPDA+Oz47bDx0PEA8RmlsZSA4Olw8L3RkXD5cPHRkIGNvbHNwYW49IjIiIGFsaWduPSJyaWdodCJcPlw8aW5wdXQgdHlwZT1maWxlIG5hbWU9ZmlsZSBzdHlsZT0id2lkdGg6NDAwIiBpZD1maWxlXD47Pjs7Pjs+Pjt0PDtsPGk8MD47PjtsPHQ8QDxGaWxlIDk6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTA6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTE6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTI6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTM6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTQ6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTU6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTY6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTc6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTg6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMTk6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPEZpbGUgMjA6XDwvdGRcPlw8dGQgY29sc3Bhbj0iMiIgYWxpZ249InJpZ2h0Ilw+XDxpbnB1dCB0eXBlPWZpbGUgbmFtZT1maWxlIHN0eWxlPSJ3aWR0aDo0MDAiIGlkPWZpbGVcPjs+Ozs+Oz4+Oz4+O3Q8cDxwPGw8VGV4dDs+O2w8S3JhY2h0Oz4+Oz47Oz47dDxwPHA8bDxUZXh0Oz47bDxKZW5uaWZlcjs+Pjs+Ozs+O3Q8cDxwPGw8VGV4dDs+O2w8MTI0NjYwNzs+Pjs+Ozs+Oz4+Oz4+Oz4+Oz4AnCFSfdJrtisPv3L2YbwsLOQZAw==" /> <table id="dlFORM" cellspacing="0" border="0" style="border-collapse:collapse;"> <tr> <td> File 1:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 2:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 3:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 4:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 5:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 6:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 7:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 8:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 9:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 10:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 11:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 12:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 13:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 14:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 15:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 16:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 17:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 18:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 19:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr><tr> <td> File 20:</td><td colspan="2" align="right"><input type=file name=file style="width:400" id=file> </td> </tr> </table> <br><br> <input name="Submit1" id="Submit1" type="submit" value="Upload Files" /> <BUTTON onclick="window.location='MultipleFileUploads.aspx?id=123553&action=viewall'" type=button>View All</BUTTON> <BUTTON onclick="window.close()" type=button>Close Window</BUTTON> </form> </div> <table align=center style="width:600px;"> <tr> <td align=left> </td> </tr> </table> </BODY> </HTML> Similar TutorialsThe following common code is not working in Firefox (3.0.11). It works in Safari (4.02) and IE7. When I say not working, I mean that when I click the submit button, the address does not change to the form processing url: Code: <!-- The data encoding type, enctype, MUST be specified as below --> <form enctype="multipart/form-data" action="uploader.php" method="POST"> <!-- MAX_FILE_SIZE must precede the file input field --> <input type="hidden" name="MAX_FILE_SIZE" value="30000" /> <!-- Name of input element determines name in $_FILES array --> Send this file: <input name="mp3file" type="file" /> <input type="submit" name="submit" value="Send File" /> </form> The file uploader.php does nothing, it is blank, I'm merely trying to establish communication. Once again, the code functions in IE and Safari so I dont think this is PHP related. could some one please tell how to upload a file without using the submit button. Iknow the location of the file and i want to upload the file into the server I am trying to write a html form in which i want to provide a default file to be uploded from the clients computer. i tried doing it by setting the value attribute to a file in some location. However that file does not get uploaded.... can anybody help Hi, I have been using ext its really fun working on it. Question:-- How can I upload a (*.jpg,*.bmp etc) file from browser to java webserver and store the file in some temporary folder(so that form webserver I could upload the file to my application server). Ur repsonse can help me analyze the problem and its possible solutions. Thanks I have a browse button when user selects a file i want to display the files attached in a table with attached filename and date. can anybody tell me how to generate table dynamically. Hi! I found out that file_names are not encoded properly when performing a HTTP multipart/form-data request. (It does not encode according to the encode type that we specify) I created a small web page which contains a input tag (file type) and tried a combination of "Enctype" and "accept-charset" in the form tag and nothing seems to work. Please find my tries in the attached zip file. (Please do change the action URL to one that is working, before you test). The RTF files contain the HTTP request header that I captured when the page is loaded from Chrome, Firefox, MSIE. Is there a way for me to fix this? /Boo Looking for a form / script to place on an HTML page that will accept not only a number of fields (name, email, etc) but a file (MS Word, TXT, or PDF) as well. Contents can either be stored in a SQL database, saved on server, or emailed to an account. Any help is appreciated. So all I want to do is to make a form where I can upload files to my webserver. I'd just like to stick to plain old HTML if possible. I made the form and the page but the problem is that when I upload a file the form gets submitted properly and it goes to another web page that is set as the action on the form however the file is nowhere to be seen! I thought that the file would just automatically appear in the same directory that the html file where the submitting form is. So does anyone know where my file is? Thanks! Hi, I've encountered this problem, and been struggling for few hours. Thing is, I have a form with enctype="multipart/form-data" and 2 inputs with type "file" in it with names RequestForm[doc1] and RequestForm[doc2]. When I submit the form, only the first one of the fields is sent into $_POST. If i comment out the 1st field, then only the second is sent. This thing is just killing me! Could someone help? What might be wrong? And yes, I do need 2 inputs, not 1 multifile input. Hi guys. I'm hoping someone can help me out. I'm by no means a web developer, but owning a business I tend to learn a little of everything - probably just enough to be dangerous. I'm trying to post a page that will have survey questions for all the brides that come through our boutique. The form has to be able to handle the normal form stuff - text fields, check boxes, etc. - but it also has to upload a user selected file. The idea is to get a bunch of feedback as well as a shot of the bride in her wedding gown. So, we'll have testimonials and accompanying pics. (I'm warning about copyright issues on the form). A prize will be randomly awarded to one of the survey participants at the end of the whole thing... once the promo is over. So, I've got the form pretty much done. But, I need a script that can handle the results and stores the images in such a way that I know what survey it goes with... make sense? Help me out here, I'm stuck. If it helps, I'm using IXwebhosting's linux platform. Thanks everybody! I need an way to upload a file by clicking a link instead of button(<input type="file" name="somename"/>). This feature has been newly added to GMail, to attached a file we need to click a link. Any ideas or code of how this can be done are needed. Thanks Hi all, how can i upload a file and when i click the submit button i go automatically to other web page. I am using some code that uploads the file perfectly, but i can't get a way to go to other page when i click the submit button. If someone can help me giving me an example of how to do that, or tell me what to change in my code i'll appreciate any kind of help. Here is my code: PHP Code: <?php function error($errorMsg) { ?> <script> alert("<?php echo $errorMsg;?>"); </script> <?php } global $folder; $folder = "uploaded"; if(!is_dir($folder)) if(!mkdir($folder)) { error("Can't, neither, access, nor create, the upload folder"); die(); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> body { background-color:#000000; } </style> <title>Upload</title> </head> <body> <center><h1><font color = "#FFFFFF" > Upload </font></h1></center> <?php function mainPage() { ?> <iframe style="display:none" name="fileUploader"></iframe> <form method="POST" target="fileUploader" enctype="multipart/form-data" action="?action=fileUploader"> <div><input name="file" type="file" STYLE="color:#FFFFFF; size="60"></div> <input type="submit" value="Upload" > </form> <?php } function fileUploader() { global $folder; function storeFile($folder,$tmpFileName,$fileName) { if(!is_uploaded_file($tmpFileName)) { error("Invalid file"); return; } if(!move_uploaded_file($tmpFileName, $folder . "/" . $fileName )) { error("Can't move uploaded file to destination"); return; } } foreach ($_FILES as $file) storeFile("uploaded",$file["tmp_name"],$file["name"]); } $actions = array("fileUploader" => 1,"fileLoader"=> 1); if (!isset($_GET['action'])) { //If not isset -> set with dumy value $_GET['action'] = "undefine"; } $action = $_GET["action"]; if($actions[$action]) $action(); else mainPage(); ?> </body> </html> Is there a way to put a custom graphic for the browse button in the file upload field, similar to how you can use a custom graphic for the submit button? FORM* I am trying to create a form that will have the "browse" option and have a submit button. Then the file will be sent as an attachment to an email address (my email). Please help. it will only be very small files (notepad). Any help is appreciated! Hello, Well iam trying to make a site or a page that uploads images to my webserver without the use of FTP. Very simpular to imageshack anyone got any idea how or what i should be looking at. ty wizanthony I need to have a basic code that will basically just let people upload images to be displayed in a continious fashion down a page. Somewhat like hypebeast.com except it would just be images straight all the way down. Addtionally I need to make it so that I can preview the image and check it before it is actualyl displayed to make sure there is nothing bad in the image. Furthermore I need to have a simple system to take it down, that lets the person set an experation date for the image and also allows them to manually delete it when they want to, but I don't want any log in systems, they should just send an e-mail to the server or something. Also they need to be able to upload to a specific catagorey, ie. the site will have tabs where the various images are displayed. How hard would this be to make and addtionally could I do it using dreamweaver? Thanks for the info and lt me know if my description is to vague. Hi guys. I took this coding from a free coding site but am stuck already! I would like the document the user uploads to appear on the website straight away. I am trying to get a notice board affect where multiple users can upload a document for someone else to look at. Thanks <!-- TWO STEPS TO INSTALL UPLOAD FILTER: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: ArjoGod, Shauna Merritt --> <!-- Modified By: Ronnie T. Moore, Editor --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin extArray = new Array(".gif", ".jpg", ".png"); function LimitAttach(form, file) { allowSubmit = false; if (!file) return; while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1); ext = file.slice(file.indexOf(".")).toLowerCase(); for (var i = 0; i < extArray.length; i++) { if (extArray[i] == ext) { allowSubmit = true; break; } } if (allowSubmit) form.submit(); else alert("Please only upload files that end in types: " + (extArray.join(" ")) + "\nPlease select a new " + "file to upload and submit again."); } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <center> Please upload only images that end in: <script> document.write(extArray.join(" ")); </script> <p> <form method=POST name=upform action="/cgi-bin/some-script.cgi" enctype="multipart/form-data"> <input type=file name=uploadfile> <p> <input type=button name="Submit" value="Submit" onclick="LimitAttach(this.form, this.form.uploadfile.value)"> </form> </center> <p><p> <!-- Script Size: 1.55 KB --> hi guys,does anyone know how i can upload my realestate listings to a several realestate portals at once,example from my web page..it is taking me forever cutting and pasting and then uploading on all sites individually Hello, all I've been looking for a while now for a progress indicator for file uploads, but all I saw in my searches were progress indicators that showed the progress as a percentage or number of bytes of the total file size. I don't need that - just something to indicate to the user that something is happening. Could someone offer a suggestion? Thanks! |