How to get the value of the selected files using Browse button in jQuery?

Question

0.00/5 (No votes)

See more:

XML

<div id="image_gallery" class="image_gallery">
         <label>Gallery:</label><input type="file" id="gallery" multiple="multiple" name="gallery"><input name="file" type="text" /><br>
    </div>

When I select more than one file using browse button, How can I get all the selected paths or only the Image name in jQuery and how can I send those values to a PHP file?

XML

<body>
        <h2 align="center">CONTENT MANAGEMENT ADMIN PANEL</h2>


<fieldset class="project-information">

<h2>Create New Project</h2>

    <div id="splash-screen" class="splash-screen">
         <label>Builder Logo:</label><input type="file" id="logo" name="browse_logo"><br>

         <label>Project Name:</label><input type="text" id="project_name" name="project_name"><br>

         <label>Background Image:</label><input type="file" id="background_image" name="background_image"><br>
    </div>


    <div id="overview" class="overview">
         <label>Project Overview:</label><textarea id="project_overview" name="project_overview"></textarea><br>

         <label>Starts From:</label><input type="text" id="starts_from" name="starts_from"><br>

         <label>Built Up Area:</label><input type="text" id="project_area" name="project_area"><br>

         <label>Buildings:</label></label><input type="text" id="project_buildings" name="project_buildings"><br>

         <label>Bedrooms:</label><input type="text" id="project_bedrooms" name="project_bedrooms"><br>
    </div>

    <div id="project_features" class="project_features">
         <label>Featured Image:</label><input type="file" id="featured_image" name="featured_image"><br>

         <label>Features:</label><textarea name="features" id="features" rows="4" cols="100"></textarea>
    </div>

    <div id="project_aminities" class="project_aminities">
         <label>Aminities:</label><input type="checkbox" name="aminities">some text1
              <input type="checkbox" class="aminities" value="1" name="aminities">some text2
              <input type="checkbox" class="aminities" name="aminities">some text3
              <input type="checkbox" class="aminities" name="aminities">some text4
              <input type="checkbox" class="aminities" name="aminities">some text5
              <input type="checkbox" class="aminities" name="aminities">some text6
              <input type="checkbox" class="aminities" name="aminities">some text7
              <input type="checkbox" class="aminities" name="aminities">some text8
              <input type="checkbox" class="aminities" name="aminities">some text9
    </div>

    <div id="floor_plans" class="floor_plans">


   <div class="file_upload">
    <label>Floor Plans</label>
    <input type="file" name="upload_file1" id="upload_file1"/>
</div>
<div id="moreImageUpload"></div>
<div class="clear"></div>
<div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
    <a href="javascript:void(0);" id="attachMore">Attach another file</a>
</div>

    </div>

    <div id="image_gallery" class="image_gallery">
         <label>Gallery:</label><input type="file" id="gallery" multiple="multiple" name="gallery"><input name="file" type="text" /><br>
    </div>

    <div id="project_specifications" class="project_features">
         <label>Specifications:</label><textarea name="specifications" id="specifications" rows="5" cols="100"></textarea><br>
    </div>

    <div id="about_builder" class="about_builder">
         <label>About_builder:</label><textarea name="about" id="about" rows="5" cols="100"></textarea><br>
    </div>

    <div id="form_submit">
        <input type="button" name="submit" id="submit" value="Submit"/>
    </div>

</fieldset>
</body>

Posted 7-Nov-14 18:16pm

Janardhanam Julapalli

Updated 7-Nov-14 19:24pm

v2

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prava-MFS · Answer 1 · 2014-11-07T19:15:00

Hello, please check, if this can help you :).

test.html
=========

<html>
    <body>
        <form action="test.php" method="post" enctype="multipart/form-data">
            Upload multiple files:<br />
            <input name="userfile[]" type="file" multiple="multiple" /><br />
            <input type="submit" value="Upload" />
        </form>
    </body>
</html>

test.php
========

if ($_FILES['userfile']) {
    $file_ary = reArrayFiles($_FILES['userfile']);

    foreach ($file_ary as $file) {
        print 'File Name: ' . $file['name'] . '<br />';
        print 'File Type: ' . $file['type'] . '<br />';
        print 'File Size: ' . $file['size'] . '<br /><hr />';
    }
}

function reArrayFiles(&$file_post) {
    $file_ary = array();
    $file_count = count($file_post['name']);
    $file_keys = array_keys($file_post);

    for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {
            $file_ary[$i][$key] = $file_post[$key][$i];
        }
    }

    return $file_ary;
}
?>

This will allow you to upload more than one file on one go, and on submitting, it will show all the details of the file.

I hope this will help you :).

Prava-MFS · Answer 2 · 2014-11-07T19:32:00

test.html
=========

<html>
    <body>
        <form action="test.php" method="post" enctype="multipart/form-data">
            Upload multiple files:<br />
            <input name="userfile[]" type="file" multiple="multiple" /><br />
            
            <label>Project Overview:</label><textarea id="project_overview" name="project_overview"></textarea><br>
            <label>Starts From:</label><input type="text" id="starts_from" name="starts_from"><br>
            <label>Built Up Area:</label><input type="text" id="project_area" name="project_area"><br>
            <label>Buildings:</label></label><input type="text" id="project_buildings" name="project_buildings"><br>
            <label>Bedrooms:</label><input type="text" id="project_bedrooms" name="project_bedrooms"><br>
            
            <input type="submit" value="Submit data" />
        </form>
    </body>
</html>
</br></br></br></br></br>

test.php
========

if ($_FILES['userfile']) {
    $file_ary = reArrayFiles($_FILES['userfile']);

    foreach ($file_ary as $file) {
        print 'File Name: ' . $file['name'] . '<br />';
        print 'File Type: ' . $file['type'] . '<br />';
        print 'File Size: ' . $file['size'] . '<br /><hr />';
    }
}

print 'Project Overview : ' . $_POST['project_overview'] . '<br />';
print 'Starts From : ' . $_POST['starts_from'] . '<br />';
print 'Built Up Area : ' . $_POST['project_area'] . '<br />';
print 'Project Building : ' . $_POST['project_buildings'] . '<br />';

function reArrayFiles(&$file_post) {
    $file_ary = array();
    $file_count = count($file_post['name']);
    $file_keys = array_keys($file_post);

    for ($i=0; $i<$file_count; $i++) {
        foreach ($file_keys as $key) {
            $file_ary[$i][$key] = $file_post[$key][$i];
        }
    }

    return $file_ary;
}
?>

I added just few posting data for example. You can check with adding all your text field/textarea into HTML file as well as PHP file.

I hope this will help you :).

How to get the value of the selected files using Browse button in jQuery?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How to get the value of the selected files using Browse button in jQuery?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us