Home > Developer > JavaScript
The upload.html page is as follows
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> File Upload </title>
<style type= "Text/css" >
*{
margin:0;
padding:0;
border:0;
}
html,body{
Background:transparent;
Overflow:hidden;
}
</style>
<body>
<form action= "" enctype= "Multipart/form-data" method= "POST" >
<input type= "file" name= "upload" id= "upload" style= "width:100%;height:200px"; >
</form>
</body>
The Frameupload.js code is as follows
/**
* The specified label [A or Button,input:button simulation for the File selection button, select the completed file can be uploaded via IFrame]
* @author Shiyangyang
* @version 0.9.0
* @module Frameupload
* @since Chrome Opera Firefox & ie7+
*/
var frameupload = (function (Require, exports, module) {
var uri = Iframeuri = ' upload.html ', index = 0;
/**
* CSS Assignment
* Dom for @param DOM operation
* @param style list of attributes to be assigned
*/
var css = function (dom,style) {
For (var k in style) {
var v = style[k];
if (/width|height|left|right|top|bottom|size|radius/i.test (k) &&/^\d+$/.test (v)) {
V + + "px"; The Style property name that contains these strings supports the pure numeric notation.
}
Dom.style[k] = v;
if (k = = "opacity") {
Dom.style.filter = "Alpha (opacity=" + (v*100) + ")"; Compatible with IE translucent effect
}
}
};
/**
* @param el render button
* @param change modify file value trigger
* @param
*/
var Upload = function (opt) {
var _index = index++;
var _this = this;
var dom = This.el = Opt.el, uri = OPT.SRC | | Iframeuri;
var style = {//To locate the newly created label based on the box model of the specified button
Width:dom.offsetWidth,
Height:dom.offsetHeight,
Left:dom.offsetLeft,
Top:dom.offsetTop,
border:0,
Position: ' Absolute ',
opacity:0
};
var frame = This.frame = (function () {
var frame = document.createelement (' iframe ');
Frame.id = Frame.name = "ajaxframe-" + _index;
Frame.src = URI;
CSS (Frame,style);
return frame;
})();
Dom.parentNode.appendChild (frame); Adds an IFRAME under the specified button's parent label.
SetInterval (function () {
var doc = frame.contentdocument;
try{//If the IFRAME closes and closes the monitor
Doc = Doc | | document.frames["ajaxframe-" +_index].document;
}catch (e) {
return false;
}
var input = Doc.getelementbyid (' upload ');
if (Input &&!input.getattribute (' Ajax-init ')) {
var form = Input.parentnode;
Form.action = opt.action;
_this.submit = function () {
if (!input.value) {
throw new Error (' need to select File ');
}
var xhr;
if (opt.ajax && xhr = window. XMLHttpRequest? New XMLHttpRequest (): {}). upload) {//support ajax2.0 Direct file upload with progress
Xhr.upload.addEventListener (' Progress ', opt.onprocess);
Xhr.onreadystatechange = function (e) {
if (xhr.readystate = = 4) {
var json;
try{
JSON = Json.parse (xhr.responsetext)
}catch (e) {
Is isn't a JSON result
}
Opt.afterUpload.call (FRAME,JSON,XHR);
}
};
var formdata = new Formdata (form);
Xhr.open ("POST", opt.action, True);
Xhr.send (Formdata);
}else{//Normal form file upload need to refresh page
Frame.onload = function () {
var doc_ = Frame.contentdocument | | document.frames["ajaxframe-" +_index].document;
if (typeof opt.afterupload = = ' function ') {
try{
Opt.afterUpload.call (frame, new Function ("Return" +doc_.body.innerhtml.replace (/[\r\n]+/, "")) ());
}catch (e) {
Alert (e);
}
}
Frame.onload = null;
Frame.src = URI;
};
Form.submit ();
}
};
Input.submit = _ This.submit;
for (var e in opt) { //Event binding, all on Start key is bound to input above
if (0 = = E.indexof ("on") && typeof opt[e] = = ' function ') {
; Input[e] = opt[e];
}
}
Input.setattribute (' Ajax-init ', ' true ');
(typeof Opt.ready = = = ' function ') && opt.ready.call (input)
}
},200);
};
return Upload;
})();
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
