Is there a html equivalent of

    <div id="file">
        <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file" title="Upload Attachment" styleclass="fileType"/> 
    </div>

Or perhaps a JS equivalent? I need to add this (or functionality very similar to this) dynamically an unknown amount of times to my page.

Would anyone have any sugestions?

EDIT

sf.dev suggested

 <label>Select file: <input type="file" name="imagefile" accept="image/jpeg, image/png"> 
 </label>       
 <input type="submit" value="upload">

how would I pass

'value="{!attachment.body}" filename="{!attachment.name}"' 

with that input? They don't seem to be recognised if I just add them.

Attribution to: Daft

Possible Suggestion/Solution #1

 <label>Select file: <input type="file" name="imagefile" accept="image/jpeg, image/png"> 
 </label>       
 <input type="submit" value="upload">

Attribution to: sfdc

Possible Suggestion/Solution #2

You can create a VF component to render the tags multiple times on your page. Bob Buzzard has a great blog article about this with sample code

http://bobbuzzard.blogspot.co.nz/2011/01/uploading-multiple-attachments-via.html

Attribution to: JimRae

Possible Suggestion/Solution #3

You can use standard HTML input tags to achieve this, and the AJAX Toolkit to actually upload the attachments.

Here is a basic example.

First you need somewhere to select your files and something to start off the upload:

<input id="file-input" type="file" name="file"/>
<input type="button" value="Upload" onclick="uploadFile();"/>

Then you need to initilise the AJAX Toolkit:

<script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
</script>
<script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>

Then on the JavaScript side of things you'll want to add this function to an onClick event somewhere (perhaps an Upload button), or even to the input onChange event if you want an instant upload:

function uploadFile()
{       
    var input = document.getElementById('file-input');
    var parentId = // Your ID here, I suggest using a merge field to get this

    var filesToUpload = input.files;

    for(var i = 0, f; f = filesToUpload[i]; i++)
    {
        var reader = new FileReader();     

        // Keep a reference to the File in the FileReader so it can be accessed in callbacks
        reader.file = f; 

        reader.onerror = function(e) 
        {
            switch(e.target.error.code) 
            {
                case e.target.error.NOT_FOUND_ERR:
                    alert('File Not Found!');
                    break;
                case e.target.error.NOT_READABLE_ERR:
                    alert('File is not readable');
                    break;
                case e.target.error.ABORT_ERR:
                    break; // noop
                default:
                    alert('An error occurred reading this file.');
            };
        };     

        reader.onabort = function(e) 
        {
            alert('File read cancelled');
        };

        reader.onload = function(e) 
        {
            var att = new sforce.SObject("Attachment");
            att.Name = this.file.name;
            att.ContentType = this.file.type;
            att.ParentId = parentId;

            att.Body = (new sforce.Base64Binary(e.target.result)).toString();

            sforce.connection.create([att],
            {
                onSuccess : function(result, source) 
                {
                    if (result[0].getBoolean("success")) 
                    {
                        console.log("new attachment created with id " + result[0].id);
                    } 
                    else 
                    {
                        console.log("failed to create attachment " + result[0]);
                    }
                }, 
                onFailure : function(error, source) 
                {
                    console.log("An error has occurred " + error);
                }
            });
        };

        reader.readAsBinaryString(f);
    }
}

Attribution to: Alex Tennant
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/33033