JQuery File Upload image upload solution compatible with ie6+

Source: Internet
Author: User
Tags button type html form jquery file upload ruby on rails

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&amp;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" >&copy; 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&amp;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 &amp; 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+

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.