Home > Developer > Web Develop
1. Download: https://github.com/blueimp/jQuery-File-Upload
2. Command:
NPM Install
Bower Install
======================
3. Modify the basic.html as follows:
1.CDN Static Reference Modification
2.ajax Commit Path modification
====&&& other demo pages to modify the same =======;
After the changes are finished. As shown below:
<! DOCTYPE html>
<!--
/*
* JQuery File Upload Plugin Basic Demo
* Https://github.com/blueimp/jQuery-File-Upload
*
* Copyright, Sebastian Tschan
* Https://blueimp.net
*
* Licensed under the MIT license:
* Https://opensource.org/licenses/MIT
*/
-
<!--force latest IE rendering engine or Chromeframe if installed-
<!--[if Ie]><meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" ><! [endif]-->
<meta charset= "Utf-8" >
<title>jquery File Upload Demo-basic version</title>
<meta name= "description" content= "file Upload widget with multiple File selection, Drag&drop support and Progre SS Bar for JQuery. Supports Cross-domain, chunked and resumable file uploads. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, node. js, Go etc) that supports standard HTML form File uploads. " >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<!--Bootstrap Styles--
<link rel= "stylesheet" href= "Http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css" >
<!--Generic Page styles---
<link rel= "stylesheet" href= "Css/style.css" >
<!--CSS to style the file input field as button and adjust the Bootstrap progress bars--
<link rel= "stylesheet" href= "Css/jquery.fileupload.css" >
<body>
<div class= "NavBar navbar-default navbar-fixed-top" >
<div class= "Container" >
<div class= "Navbar-header" >
<button type= "button" class= "Navbar-toggle" data-toggle= "collapse" data-target= "Navbar-fixed-top". Navbar-collapse ">
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
<span class= "Icon-bar" ></span>
</button>
<a class= "Navbar-brand" href= "Https://github.com/blueimp/jQuery-File-Upload" >jquery File upload</a>
</div>
<div class= "Navbar-collapse collapse" >
<ul class= "Nav navbar-nav" >
<li><a href= "Https://github.com/blueimp/jQuery-File-Upload/tags" >Download</a></li>
<li><a href= "Https://github.com/blueimp/jQuery-File-Upload" >source code</a></li>
<li><a href= "Https://github.com/blueimp/jQuery-File-Upload/wiki" >Documentation</a></li>
<li><a href= "Https://blueimp.net" >© Sebastian tschan</a></li>
</ul>
</div>
</div>
</div>
<div class= "Container" >
<ul class= "Nav nav-tabs" >
<li class= "Active" ><a href= "basic.html" >Basic</a></li>
<li><a href= "basic-plus.html" >basic plus</a></li>
<li><a href= "index.html" >basic Plus ui</a></li>
<li><a href= "angularjs.html" >AngularJS</a></li>
<li><a href= "jquery-ui.html" >jquery ui</a></li>
</ul>
<br>
<blockquote>
<p>file Upload widget with multiple File selection, Drag&drop support and progress bar for jquery.<br>
Supports Cross-domain, chunked and resumable file uploads.<br>
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, node. js, Go etc) that supports standard HTML form File uploads.</p>
</blockquote>
<br>
<!--the Fileinput-button span is used to style the file input field as button--
<span class= "btn btn-success Fileinput-button" >
<i class= "Glyphicon glyphicon-plus" ></i>
<span>select files...</span>
<!--the file input field used as target for the file upload widget--
<input id= "FileUpload" type= "file" Name= "files[]" multiple>
</span>
<br>
<br>
<!--the global progress bar--and
<div id= "Progress" class= "Progress" >
<div class= "Progress-bar progress-bar-success" ></div>
</div>
<!--the container for the uploaded files--and
<div id= "Files" class= "Files" ></div>
<br>
<div class= "Panel Panel-default" >
<div class= "Panel-heading" >
</div>
<div class= "Panel-body" >
<ul>
<li>the maximum file size for uploads in this demo was <strong>999 kb</strong> (default file size is Unli mited) .</li>
<li>only image Files (<strong>jpg, GIF, png</strong>) is allowed in the demo (by default there is no F Ile type restriction) .</li>
<li>uploaded files would be deleted automatically after <strong>5 minutes or less</strong> (demo files ar e stored in memory) .</li>
<li>you can <strong>drag & drop</strong> files from your desktop in this webpage (see <a href= "https://github.com/blueimp/ Jquery-file-upload/wiki/browser-support ">browser support</a>) .</li>
<li>please refer to the <a href= "Https://github.com/blueimp/jQuery-File-Upload" >project website</a > <a href= "Https://github.com/blueimp/jQuery-File-Upload/wiki" >documentation</a> for more Information.</li>
<li>built with the <a href= "http://getbootstrap.com/" >Bootstrap</a> CSS framework and Icons from <a href= "http://glyphicons.com/" >Glyphicons</a>.</li>
</ul>
</div>
</div>
</div>
<script src= "Http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js" ></script>
<!--the jquery UI widget factory, can be omitted if JQuery UI is already included-
<script src= "Js/vendor/jquery.ui.widget.js" ></script>
<!--the Iframe Transport is required for browsers without support for XHR file uploads-
<script src= "Js/jquery.iframe-transport.js" ></script>
<!--the basic File Upload plugin--
<script src= "Js/jquery.fileupload.js" ></script>
<!--Bootstrap JS isn't required, but included for the Responsive demo navigation-
<script src= "Http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>
<script>
/*jslint Unparam:true */
/*global window, $ */
$ (function () {
' Use strict ';
Your server-side upload handler:
var url = ' http://localhost:8888/';
$ (' #fileupload '). FileUpload ({
Url:url,
DataType: ' JSON ',
Done:function (E, data) {
$.each (data.result.files, function (index, file) {
$ (' <p/> '). Text (file.name). AppendTo (' #files ');
});
},
Progressall:function (E, data) {
var progress = parseint (Data.loaded/data.total * 100, 10);
$ (' #progress. Progress-bar '). CSS (
' Width ',
Progress + '% '
);
}
}). Prop (' disabled ',!$.support.fileinput)
. Parent (). addclass ($.support.fileinput undefined: ' disabled ');
});
</script>
</body>
4. Service run up: (need to point server knowledge)
5. Complete the upload;
Other Demo: https://blueimp.github.io/jQuery-File-Upload/jquery-ui.html (static display available on official website)
JQuery File Upload image upload solution compatible with ie6+
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
