DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Creating Scrolling Text With HTML, CSS, and JavaScript
  • Mastering SSR and CSR in Next.js: Building High-Performance Data Visualizations
  • How to Create a Pokémon Breeding Gaming Calculator Using HTML, CSS, and JavaScript
  • How to Convert HTML to DOCX in Java

Trending

  • Top Book Picks for Site Reliability Engineers
  • Intro to RAG: Foundations of Retrieval Augmented Generation, Part 1
  • Revolutionizing Financial Monitoring: Building a Team Dashboard With OpenObserve
  • Transforming AI-Driven Data Analytics with DeepSeek: A New Era of Intelligent Insights
  1. DZone
  2. Coding
  3. Languages
  4. Multiple File Upload is Easy in HTML5

Multiple File Upload is Easy in HTML5

By 
Raymond Camden user avatar
Raymond Camden
·
Feb. 29, 12 · Interview
Likes (0)
Comment
Save
Tweet
Share
100.7K Views

Join the DZone community and get the full member experience.

Join For Free

this won't be a terribly long post, nor one that is probably informative to a lot of people, but i finally got around to looking at the html5 specification for multiple file uploads (by that i mean allowing a user to pick multiple files from one file form field). i knew it existed i just never got around to actually looking at it. turns out it is incredibly simple.

you take a file form field:

<input type="file" name="myfile"> 

and you add multiple to it (or multiple="multiple").

<input type="file" name="myfiles" multiple="multiple"> 

and... yeah, that's it. even better, it degrades perfectly. so in chrome it works, and your label switches from...

to...

i kept waiting for the "but, wait" moment and it never came. in ie where it fails to work, it simply remains a file upload control that works with one file, not many. because it's so simple and fallback is so good, i can't see really bothering to use another solution, like a flash uploader, but you could do a bit of massaging for it. so for example, consider if my form had the following label:

multiple file: <input type="file" name="files" multiple="multiple"><br/> 

in ie, the user won't be able to select multiple files. while not the end of the world, it kind of bugs me that the label may mislead the user into trying something they can't do. (and as we know, the user will blame us, not ie.) so what to do?

i did some basic research into how to use javascript to detect features. i found a few good examples that basically suggested creating a temporary dom item like so:

var el = document.createelement("input"); 

but here's where i had issues. most of the links i found discussed how to detect new html form types , like range for example. these techniques worked by setting the type on the new element to the type you want to test and then immediately checking to see if the type still has the same value. but what about attributes?

turns out dive into html5 has a great article on this. when you have your dom item, you can simply ask if the item exists. here is an example:

function supportmultiple() {
    //do i support input type=file/multiple
    var el = document.createelement("input");

    return ("multiple" in el);

}

so given that, i modified my mark up a bit. i changed the label in front of my form and hid the word "multiple":

<span id="multiplefilelabel" style="display:none">multiple </span>file: <input type="file" name="files" multiple="multiple"><br/> 

i then added an init method to my body tag and used the following code:

function supportmultiple() {
    //do i support input type=file/multiple
    var el = document.createelement("input");

    return ("multiple" in el);
}

function init() {
    if(supportmultiple()) {
        document.queryselector("#multiplefilelabel").setattribute("style","");
    }
}

and that worked like a charm. ie say just "file" whereas chrome and firefox had the new hotness.

so yeah - that's a lot of writing about a simple little thing, but... dare i say it... i'm really getting jazzed up about html again!

here's my entire test template if you want to cut and paste:

<!doctype html>
<html>
<head>

<script>
    function supportmultiple() {
        //do i support input type=file/multiple
        var el = document.createelement("input");

        return ("multiple" in el);
    }

    function init() {
        if(supportmultiple()) {
            document.queryselector("#multiplefilelabel").setattribute("style","");
        }
    }
</script>
</head>

<body onload="init()">

    <form action="" method="post" enctype="multipart/form-data">
    normal text: <input type="text" name="name"><br/>
    <span id="multiplefilelabel" style="display:none">multiple </span>file: <input type="file" name="files" multiple="multiple"><br/>
    <input type="submit">
    </form>

</body>
</html>

p.s. so how you actually process the upload depends on your server. my coldfusion readers are probably wondering how it handles this. good news, bad news. the bad news is that coldfusion can't (as far as i and other smarter peoiple know) handle this at all. if you want to do this in coldfusion 9, use the flash based multifile uploader instead. the good news is that coldfusion 10 handles it just file. be sure to use action value of "uploadall" of your cffile tag.

HTML Upload

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Creating Scrolling Text With HTML, CSS, and JavaScript
  • Mastering SSR and CSR in Next.js: Building High-Performance Data Visualizations
  • How to Create a Pokémon Breeding Gaming Calculator Using HTML, CSS, and JavaScript
  • How to Convert HTML to DOCX in Java

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!