Remain Upload File In Submit Form

Question

Remain Upload File In Submit Form

228 views Asked by Misz Jieha At 06 September 2013 at 08:26

I just want to know: is there any way to remain the upload files (not yet uploaded to server) in a submit form?

I have a page, in that page I have multiple upload files and I also have a 1st drop down list that will populate a 2nd drop down menu (the data retrieve from database). So in my case, when the user chooses (a) file(s) to upload, the file name will display below the browse button. My problem is, when the user clicks on the 1st drop down list, I have to post the form, so that it will populate the 2nd drop down list and the file(s) that have been chosen will disapear.

Here is my code:

<script src="jquery-1.9.1.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
    $(function(){ // wait for document to load
        $('#picture').MultiFile({
            STRING: {
                remove: '<img src="bin.gif" height="16" width="16" alt="x"/>'
            }
        });
    });
</script>

<form action="upload_file.php" method="post" enctype="multipart/form-data" >
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<label for="file">Filename:</label>
<input type="file"  name="picture[]" id="picture" ><br>

And here is the drop down menu code:

onchange="this.form.submit();"

Original Q&A

There are 2 answers

**manu** · Answer 1 · 2013-09-06 08:35:06

manu On 06 September 2013 at 08:35

can't you receive your data for Dropdown 2 using ajax? then u need not to submit all the user files....

cheers

**manu** · Answer 2 · 2013-09-06 09:02:35

i've done q&d example here.

first file: index.php

<html>
<head>
        <script src="jquery-1.9.1.min.js" type="text/javascript" language="javascript"></script>

        <script type="text/javascript">
            // when DOM is ready, put data in the second dropdown
            $( document ).ready(function() {
                getDataForSecondDropdown();
            });


            // function adds data to the second dropdown using ajax
            function getDataForSecondDropdown() {
                // append the id of the first dropdown
                var selectValue = $('#first').val();
                $.ajax({
                    url: 'data.php?id=' + selectValue,
                    success: function( response ) {
                        $('#second').html( response );
                    }
                });
            }

        </script>
</head> 
<body>
    <select id="first" onchange="getDataForSecondDropdown();">
        <option value="1">Image Filetype</option>
        <option value="2">Excel Filetype</option>
    </select>
    <select id="second">            
    </select>
</body>

second file data.php

<?php
// when id = 1 -> imagefiletype selected
if ( $_REQUEST['id'] == 1 ) {
    $strResult = '<option>jpg</option><option>png</option><option>bmp</option>';
}
// excel filtetpy selected
else {
    $strResult = '<option>xls</option><option>xlsx</option>';
}

echo $strResult;

for further information, read the jquery docs for example.

TechQA.

Remain Upload File In Submit Form

There are 2 answers

Related Questions in PHP

Related Questions in DROP-DOWN-MENU

Related Questions in INPUT-TYPE-FILE

Popular Questions

Popular Tags

Trending Questions