HTML equivalent of apex:inputFile?
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);
}
}
<label>Select file: <input type="file" name="imagefile" accept="image/jpeg, image/png">
</label>
<input type="submit" value="upload">
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