Multiple instances on one page

JFileUpload pure HTML version.
Post Reply
User avatar
support
Posts: 1503
Joined: Sun Jan 27, 2008 6:19 pm

Multiple instances on one page

Post by support »

We can define 2 instances of JFileUpload HTML5 on the same page with:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
 <title>Pure HTML JBatchUpload</title>
 <link type="text/css" rel="stylesheet" href="css/style.css" />
 <link rel="prefetch" href="img/icons.png"/>
</head>
<body>

<div id="jfuparentcontainer" style="width:1100px;">
	<div id="jfucontainer1" style="width:500px; display: inline-block; margin-left: 1%">
	  <!-- UI will be inserted here automatically -->
	</div>

	<div id="jfucontainer2" style="width:500px; display: inline-block; margin-left: 1%">
	  <!-- UI will be inserted here automatically -->
	</div>
</div>

<br/>

<script type="text/javascript" src="js/fileupload.js"></script>
<!-- Start your code here -->
<script>
       // Setup some parameters
       var params1 = {
           /* Regular parameters */
           url : "http://localhost:8080/upload/process.jsp",
           paramfile : "uploadfile",
           maxfilesize : 1048576 * 500,
           maxfiles : 50,
           maxsize : 1048576 * 1000,
           chunksize : 1048576 * 5,
           resume : true,
           retry : 5,
           retrydelay : 2,
           folderdepth : -1,
           resetprogressbar : true,
           policy : "ignore",
           overwritepolicy : "prompt",
           /* Extra parameters */
           param1 : "todo",
           value1 : "upload",
           param2 : "relativefilename",
           value2 : "true",
           param3 : "emptydirectory",
           value3 : "true",
           param4 : "encodeheaders",
           value4 : "false",
           loglevel : 1
       };

       // Create your instance of JFileUpload.
       // "jfucontainer1" is DIV identifier where you want it to be displayed.
       var jfu1 = new JFU("jfucontainer1", params1);

       // Initialize
       if (jfu1.allFeaturesSupport() === true) {
           // Display now
           jfu1.initialize();
       }
       else {
          // Browser not supported
          var jfucontainer1 = document.getElementById("jfucontainer1");
          jfucontainer1.innerHTML = "<h2>Browser not supported</h2>";
       }
</script>
<script>
       // Setup some parameters
       var params2 = {
           /* Regular parameters */
           url : "http://localhost:8080/upload/process.jsp",
           paramfile : "uploadfile",
           maxfilesize : 1048576 * 500,
           maxfiles : 50,
           maxsize : 1048576 * 1000,
           chunksize : 1048576 * 5,
           resume : true,
           retry : 5,
           retrydelay : 2,
           folderdepth : -1,
           resetprogressbar : true,
           policy : "ignore",
           overwritepolicy : "prompt",
           /* Extra parameters */
           param1 : "todo",
           value1 : "upload",
           param2 : "relativefilename",
           value2 : "true",
           param3 : "emptydirectory",
           value3 : "true",
           param4 : "encodeheaders",
           value4 : "false",
           loglevel : 1
       };

       // Create your instance of JFileUpload.
       // "jfucontainer2" is DIV identifier where you want it to be displayed.
       var jfu2 = new JFU("jfucontainer2", params2);

       // Update some resources before initialization such as UI
       jfu2.i18n.resources["containerempty.welcome.label"] = "Drag and drop<br>your files here<br><br>or<br>add files";
	   
       // Initialize
       if (jfu2.allFeaturesSupport() === true) {
           // Display now
           jfu2.initialize();
       }
       else {
          // Browser not supported
          var jfucontainer2 = document.getElementById("jfucontainer2");
          jfucontainer2.innerHTML = "<h2>Browser not supported</h2>";
       }
</script>
<!-- End your code here -->
<br/>

</body>
</html>

Post Reply