一，ajaxfileupload
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fn" %>
<%@ taglib prefix="cus" uri="http://web.microcare.com/tag"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="/tpl/html/common/ajaxfileupload/ajaxfileupload.js"></script>
<c:import url="${contextpath}/tpl/html/appuploadjs.jsp" />
</head>
<body>
<input type=file id="appFile" name="appFile" onchange="getValue();" style="-moz-opacity:0;filter:alpha(opacity=0);opacity:0;position:absolute;left:166px;" />
<input id="appFilename" style="color: green;border: 1px solid green;width:300px;" />
<input type="button" value="File" style="border: 1px solid green;width:80px;" />
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<script type="text/javascript">
function getValue(){
document.getElementById('appFilename').value = document.getElementById('appFile').value;
validateImage();
ajaxFileUpload();
}
function ajaxFileUpload()
{
/* $("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
}); */
$.ajaxFileUpload
(
{
url:'/json/dff.action?op=App.upload',
secureuri:false,
fileElementId:'appFile',
dataType: 'json',
success: function (data, status)
{
alert("1"+data);
alert("5"+data.data.errorCode);
if(typeof(data.errorCode) != undefined)
{
alert(data.data.errorCode);
}
},
error: function (data, status, e)
{
alert("2"+data);
alert("3"+status);
alert("4"+e);
}
}
)
return false;
}
//校验图片格式及大小 Add Date 2012-6-14 LIUYI
function validateImage() {
var tmpFileValue = document.getElementById('appFilename').value;
//校验图片格式
if(/^.*?\.(apk|ipa)$/.test(tmpFileValue.toLowerCase())){
return true;
} else {
alert("只能上传apk和ipa格式的文件！");
return false;
}
if(file.value == ""){
alert("请选择上传的文件!");
return false;
}
}
</script>
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if(window.ActiveXObject)
{
if(typeof uri== 'boolean'){
iframeHtml += ' src="' + 'javascript:false' + '"';
}
else if(typeof uri== 'string'){
iframeHtml += ' src="' + uri + '"';
}
}
iframeHtml += ' />';
jQuery(iframeHtml).appendTo(document.body);
return jQuery('#' + frameId).get(0);
},
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if(data)
{
for(var i in data)
{
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime()
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function()
{ try
{
jQuery(io).remove();
jQuery(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if(form.encoding)
{
jQuery(form).attr('encoding', 'multipart/form-data');
}
else
{
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
jQuery('#' + frameId).load(uploadCallback );
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
return data;
},
handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}
})
第二种为ajaxupload
上传文档:
<script src="/js/common/AjaxUpload.js" type="text/javascript"></script>
<div class="uploadFile">
<span id="doc"><input type="text" disabled="disabled" /></span>
<input type="hidden" id="hidFileName" />
<input type="button" id="btnUploadFile" value="上传" />
<input type="button" id="btnDeleteFile" value="删除" />
</div>
上传图片:
<div class="uploadImg">
<img id="imgShow" src="/images/nophoto.gif" />
<input type="hidden" id="hidImgName" />
<input type="button" id="btnUploadImg" value="上传" />
<input type="button" id="btnDeleteImg" value="删除" />
</div>
window.onload = function() {
init(); //初始化
}
//初始化
function init() {
//初始化文档上传
var btnFile = document.getElementById("btnUploadFile");
var doc = document.getElementById("doc");
var hidFileName = document.getElementById("hidFileName");
document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); };
g_AjxUploadFile(btnFile, doc, hidFileName);
//初始化图片上传
var btnImg = document.getElementById("btnUploadImg");
var img = document.getElementById("imgShow");
var hidImgName = document.getElementById("hidImgName");
document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); };
g_AjxUploadImg(btnImg, img, hidImgName);
}
var g_AjxTempDir = "/file/temp/";
//文档上传
function g_AjxUploadFile(btn, doc, hidPut, action) {
var button = btn, interval;
new AjaxUpload(button, {
action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action),
data: {},
name: 'myfile',
onSubmit: function(file, ext) {
if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) {
alert("您上传的文档格式不对，请重新选择！");
return false;
}
},
onComplete: function(file, response) {
flagValue = response;
if (flagValue == "1") {
alert("您上传的文档格式不对，请重新选择！");
}
else if (flagValue == "2") {
alert("您上传的文档大于2M，请重新选择！");
}
else if (flagValue == "3") {
alert("文档上传失败！");
}
else {
hidPut.value = response;
doc.innerHTML="<a href='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>";
}
}
});
}
//图片上传
function g_AjxUploadImg(btn, img, hidPut) {
var button = btn, interval;
new AjaxUpload(button, {
action: '/Common/UploadHandler.ashx?fileType=img',
data: {},
name: 'myfile',
onSubmit: function(file, ext) {
if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) {
alert("您上传的图片格式不对，请重新选择！");
return false;
}
},
onComplete: function(file, response) {
flagValue = response;
if (flagValue == "1") {
alert("您上传的图片格式不对，请重新选择！");
}
else if (flagValue == "2") {
alert("您上传的图片大于200K，请重新选择！");
}
else if (flagValue == "3") {
alert("图片上传失败！");
}
else {
hidPut.value = response;
img.src = g_AjxTempDir + response;
}
}
});
}
//删除文档
function DelFile(doc, hidPut) {
hidPut.value = "";
doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />";
}
//删除图片
function DelImg(img, hidPut) {
hidPut.value = "";
img.src = "/images/nophoto.gif";
}
/*上传文件*/
.uploadFile{margin-bottom:10px;}
/*上传图片*/
.uploadImg{}
.uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}
/**
* AJAX Upload ( http://valums.com/ajax-upload/ )
* Copyright (c) Andris Valums
* Licensed under the MIT license ( http://valums.com/mit-license/ )
* Thanks to Gary Haran, David Mark, Corey Burns and others for contributions
*/
(function () {
/* global window */
/* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */
/**
* Wrapper for FireBug's console.log
*/
function log() {
if (typeof(console) != 'undefined' && typeof(console.log) == 'function') {
Array.prototype.unshift.call(arguments, '[Ajax Upload]');
console.log(Array.prototype.join.call(arguments, ' '));
}
}
/**
* Attaches event to a dom element.
* @param {Element} el
* @param type event name
* @param fn callback This refers to the passed element
*/
function addEvent(el, type, fn) {
if (el.addEventListener) {
el.addEventListener(type, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + type, function () {
fn.call(el);
});
} else {
throw new Error('not supported or DOM not loaded');
}
}
/**
* Attaches resize event to a window, limiting
* number of event fired. Fires only when encounteres
* delay of 100 after series of events.
*
* Some browsers fire event multiple times when resizing
* http://www.quirksmode.org/dom/events/resize.html
*
* @param fn callback This refers to the passed element
*/
function addResizeEvent(fn) {
var timeout;
addEvent(window, 'resize', function () {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(fn, 100);
});
}
// Needs more testing, will be rewriten for next version
// getOffset function copied from jQuery lib (http://jquery.com/)
if (document.documentElement.getBoundingClientRect) {
// Get Offset using getBoundingClientRect
// http://ejohn.org/blog/getboundingclientrect-is-awesome/
var getOffset = function (el) {
var box = el.getBoundingClientRect();
var doc = el.ownerDocument;
var body = doc.body;
var docElem = doc.documentElement; // for ie
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
// In Internet Explorer 7 getBoundingClientRect property is treated as physical,
// while others are logical. Make all logical, like in IE8.
var zoom = 1;
if (body.getBoundingClientRect) {
var bound = body.getBoundingClientRect();
zoom = (bound.right - bound.left) / body.clientWidth;
}
if (zoom > 1) {
clientTop = 0;
clientLeft = 0;
}
var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop,
left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft;
return {
top: top,
left: left
};
};
} else {
// Get offset adding all offsets
var getOffset = function (el) {
var top = 0,
left = 0;
do {
top += el.offsetTop || 0;
left += el.offsetLeft || 0;
el = el.offsetParent;
} while (el);
return {
left: left,
top: top
};
};
}
/**
* Returns left, top, right and bottom properties describing the border-box,
* in pixels, with the top-left relative to the body
* @param {Element} el
* @return {Object} Contains left, top, right,bottom
*/
function getBox(el) {
var left, right, top, bottom;
var offset = getOffset(el);
left = offset.left;
top = offset.top;
right = left + el.offsetWidth;
bottom = top + el.offsetHeight;
return {
left: left,
right: right,
top: top,
bottom: bottom
};
}
/**
* Helper that takes object literal
* and add all properties to element.style
* @param {Element} el
* @param {Object} styles
*/
function addStyles(el, styles) {
for (var name in styles) {
if (styles.hasOwnProperty(name)) {
el.style[name] = styles[name];
}
}
}
/**
* Function places an absolutely positioned
* element on top of the specified element
* copying position and dimentions.
* @param {Element} from
* @param {Element} to
*/
function copyLayout(from, to) {
var box = getBox(from);
addStyles(to, {
position: 'absolute',
left: box.left + 'px',
top: box.top + 'px',
width: from.offsetWidth + 'px',
height: from.offsetHeight + 'px'
});
}
/**
* Creates and returns element from html chunk
* Uses innerHTML to create an element
*/
var toElement = (function () {
var div = document.createElement('div');
return function (html) {
div.innerHTML = html;
var el = div.firstChild;
return div.removeChild(el);
};
})();
/**
* Function generates unique id
* @return unique id
*/
var getUID = (function () {
var id = 0;
return function () {
return 'ValumsAjaxUpload' + id++;
};
})();
/**
* Get file name from path
* @param {String} file path to file
* @return filename
*/
function fileFromPath(file) {
return file.replace(/.*(\/|\\)/, "");
}
/**
* Get file extension lowercase
* @param {String} file name
* @return file extenstion
*/
function getExt(file) {
return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : '';
}
function hasClass(el, name) {
var re = new RegExp('\\b' + name + '\\b');
return re.test(el.className);
}
function addClass(el, name) {
if (!hasClass(el, name)) {
el.className += ' ' + name;
}
}
function removeClass(el, name) {
var re = new RegExp('\\b' + name + '\\b');
el.className = el.className.replace(re, '');
}
function removeNode(el) {
el.parentNode.removeChild(el);
}
/**
* Easy styling and uploading
* @constructor
* @param button An element you want convert to
* upload button. Tested dimentions up to 500x500px
* @param {Object} options See defaults below.
*/
window.AjaxUpload = function (button, options) {
this._settings = {
// Location of the server-side upload script
action: 'upload.php',
// File upload name
name: 'userfile',
// Additional data to send
data: {},
// Submit file as soon as it's selected
autoSubmit: true,
// The type of data that you're expecting back from the server.
// html and xml are detected automatically.
// Only useful when you are using json data as a response.
// Set to "json" in that case.
responseType: false,
// Class applied to button when mouse is hovered
hoverClass: 'hover',
// Class applied to button when AU is disabled
disabledClass: 'disabled',
// When user selects a file, useful with autoSubmit disabled
// You can return false to cancel upload
onChange: function (file, extension) {},
// Callback to fire before file is uploaded
// You can return false to cancel upload
onSubmit: function (file, extension) {},
// Fired when file upload is completed
// WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
onComplete: function (file, response) {}
};
// Merge the users options with our defaults
for (var i in options) {
if (options.hasOwnProperty(i)) {
this._settings[i] = options[i];
}
}
// button isn't necessary a dom element
if (button.jquery) {
// jQuery object was passed
button = button[0];
} else if (typeof button == "string") {
if (/^#.*/.test(button)) {
// If jQuery user passes #elementId don't break it
button = button.slice(1);
}
button = document.getElementById(button);
}
if (!button || button.nodeType !== 1) {
throw new Error("Please make sure that you're passing a valid element");
}
if (button.nodeName.toUpperCase() == 'A') {
// disable link
addEvent(button, 'click', function (e) {
if (e && e.preventDefault) {
e.preventDefault();
} else if (window.event) {
window.event.returnValue = false;
}
});
}
// DOM element
this._button = button;
// DOM element
this._input = null;
// If disabled clicking on button won't do anything
this._disabled = false;
// if the button was disabled before refresh if will remain
// disabled in FireFox, let's fix it
this.enable();
this._rerouteClicks();
};
// assigning methods to our class
AjaxUpload.prototype = {
setData: function (data) {
this._settings.data = data;
},
disable: function () {
addClass(this._button, this._settings.disabledClass);
this._disabled = true;
var nodeName = this._button.nodeName.toUpperCase();
if (nodeName == 'INPUT' || nodeName == 'BUTTON') {
this._button.setAttribute('disabled', 'disabled');
}
// hide input
if (this._input) {
// We use visibility instead of display to fix problem with Safari 4
// The problem is that the value of input doesn't change if it
// has display none when user selects a file
this._input.parentNode.style.visibility = 'hidden';
}
},
enable: function () {
removeClass(this._button, this._settings.disabledClass);
this._button.removeAttribute('disabled');
this._disabled = false;
},
/**
* Creates invisible file input
* that will hover above the button
* <div><input type='file' /></div>
*/
_createInput: function () {
var self = this;
var input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
addStyles(input, {
'position': 'absolute',
// in Opera only 'browse' button
// is clickable and it is located at
// the right side of the input
'right': 0,
'margin': 0,
'padding': 0,
'fontSize': '480px',
'cursor': 'pointer'
});
var div = document.createElement("div");
addStyles(div, {
'display': 'block',
'position': 'absolute',
'overflow': 'hidden',
'margin': 0,
'padding': 0,
'opacity': 0,
// Make sure browse button is in the right side
// in Internet Explorer
'direction': 'ltr',
//Max zIndex supported by Opera 9.0-9.2
'zIndex': 2147483583
});
// Make sure that element opacity exists.
// Otherwise use IE filter
if (div.style.opacity !== "0") {
if (typeof(div.filters) == 'undefined') {
throw new Error('Opacity not supported by the browser');
}
div.style.filter = "alpha(opacity=0)";
}
addEvent(input, 'change', function () {
if (!input || input.value === '') {
return;
}
// Get filename from input, required
// as some browsers have path instead of it
var file = fileFromPath(input.value);
if (false === self._settings.onChange.call(self, file, getExt(file))) {
self._clearInput();
return;
}
// Submit form when value is changed
if (self._settings.autoSubmit) {
self.submit();
}
});
addEvent(input, 'mouseover', function () {
addClass(self._button, self._settings.hoverClass);
});
addEvent(input, 'mouseout', function () {
removeClass(self._button, self._settings.hoverClass);
// We use visibility instead of display to fix problem with Safari 4
// The problem is that the value of input doesn't change if it
// has display none when user selects a file
input.parentNode.style.visibility = 'hidden';
});
div.appendChild(input);
document.body.appendChild(div);
this._input = input;
},
_clearInput: function () {
if (!this._input) {
return;
}
// this._input.value = ''; Doesn't work in IE6
removeNode(this._input.parentNode);
this._input = null;
this._createInput();
removeClass(this._button, this._settings.hoverClass);
},
/**
* Function makes sure that when user clicks upload button,
* the this._input is clicked instead
*/
_rerouteClicks: function () {
var self = this;
// IE will later display 'access denied' error
// if you use using self._input.click()
// other browsers just ignore click()
addEvent(self._button, 'mouseover', function () {
if (self._disabled) {
return;
}
if (!self._input) {
self._createInput();
}
var div = self._input.parentNode;
copyLayout(self._button, div);
div.style.visibility = 'visible';
});
// commented because we now hide input on mouseleave
/**
* When the window is resized the elements
* can be misaligned if button position depends
* on window size
*/
//addResizeEvent(function(){
// if (self._input){
// copyLayout(self._button, self._input.parentNode);
// }
//});
},
/**
* Creates iframe with unique name
* @return {Element} iframe
*/
_createIframe: function () {
// We can't use getTime, because it sometimes return
// same value in safari :(
var id = getUID();
// We can't use following code as the name attribute
// won't be properly registered in IE6, and new window
// on form submit will open
// var iframe = document.createElement('iframe');
// iframe.setAttribute('name', id);
var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
// src="javascript:false; was added
// because it possibly removes ie6 prompt
// "This page contains both secure and nonsecure items"
// Anyway, it doesn't do any harm.
iframe.setAttribute('id', id);
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
},
/**
* Creates form, that will be submitted to iframe
* @param {Element} iframe Where to submit
* @return {Element} form
*/
_createForm: function (iframe) {
var settings = this._settings;
// We can't use the following code in IE6
// var form = document.createElement('form');
// form.setAttribute('method', 'post');
// form.setAttribute('enctype', 'multipart/form-data');
// Because in this case file won't be attached to request
var form = toElement('<form method="post" enctype="multipart/form-data"></form>');
form.setAttribute('action', settings.action);
form.setAttribute('target', iframe.name);
form.style.display = 'none';
document.body.appendChild(form);
// Create hidden input element for each data key
for (var prop in settings.data) {
if (settings.data.hasOwnProperty(prop)) {
var el = document.createElement("input");
el.setAttribute('type', 'hidden');
el.setAttribute('name', prop);
el.setAttribute('value', settings.data[prop]);
form.appendChild(el);
}
}
return form;
},
/**
* Gets response from iframe and fires onComplete event when ready
* @param iframe
* @param file Filename to use in onComplete callback
*/
_getResponse: function (iframe, file) {
// getting response
var toDeleteFlag = false,
self = this,
settings = this._settings;
addEvent(iframe, 'load', function () {
if ( // For Safari
iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||
// For FF, IE
iframe.src == "javascript:'<html></html>';") {
// First time around, do not delete.
// We reload to blank page, so that reloading main page
// does not re-submit the post.
if (toDeleteFlag) {
// Fix busy state in FF3
setTimeout(function () {
removeNode(iframe);
},
0);
}
return;
}
var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;
// fixing Opera 9.26,10.00
if (doc.readyState && doc.readyState != 'complete') {
// Opera fires load event multiple times
// Even when the DOM is not ready yet
// this fix should not affect other browsers
return;
}
// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false") {
// In Opera 9.64 event was fired second time
// when body.innerHTML changed from false
// to server response approx. after 1 sec
return;
}
var response;
if (doc.XMLDocument) {
// response is a xml document Internet Explorer property
response = doc.XMLDocument;
} else if (doc.body) {
// response is html document or plain text
response = doc.body.innerHTML;
if (settings.responseType && settings.responseType.toLowerCase() == 'json') {
// If the document was sent as 'application/javascript' or
// 'text/javascript', then the browser wraps the text in a <pre>
// tag and performs html encoding on the contents. In this case,
// we need to pull the original text content from the text node's
// nodeValue property to retrieve the unmangled content.
// Note that IE6 only understands text/html
if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE') {
response = doc.body.firstChild.firstChild.nodeValue;
}
if (response) {
response = eval("(" + response + ")");
} else {
response = {};
}
}
} else {
// response is a xml document
response = doc;
}
settings.onComplete.call(self, file, response);
// Reload blank page, so that reloading main page
// does not re-submit the post. Also, remember to
// delete the frame
toDeleteFlag = true;
// Fix IE mixed content issue
iframe.src = "javascript:'<html></html>';";
});
},
/**
* Upload file contained in this._input
*/
submit: function () {
var self = this,
settings = this._settings;
if (!this._input || this._input.value === '') {
return;
}
var file = fileFromPath(this._input.value);
// user returned false to cancel upload
if (false === settings.onSubmit.call(this, file, getExt(file))) {
this._clearInput();
return;
}
// sending request
var iframe = this._createIframe();
var form = this._createForm(iframe);
// assuming following structure
// div -> input type='file'
removeNode(this._input.parentNode);
removeClass(self._button, self._settings.hoverClass);
form.appendChild(this._input);
form.submit();
// request set, clean up
removeNode(form);
form = null;
removeNode(this._input);
this._input = null;
// Get response from iframe and fire onComplete event when ready
this._getResponse(iframe, file);
// get ready for next request
this._createInput();
}
};
})();
相关推荐
Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式，它们都可以实现文件上传到服务器端，但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式，它将文件转换为Base64字符串，然后将...
Ajax上传的优势在于它可以在不刷新页面的情况下完成文件上传，提高用户体验。以下是一个简单的jQuery实现示例： 1. HTML部分： ```html 上传 <div id="progressBar"></div> ``` 2. JavaScript部分： ```...
【上传文件的AJAX小例子】是一个通过HTML5新特性实现的文件上传示例，它结合了AJAX技术，提供了一种无需刷新页面即可完成文件上传的交互方式。在这个例子中，IBM展示了一种创新的文件上传解决方案，尤其是利用了...
为了解决这个问题，通常会采用两种方法：Flash插件或HTML5的File API。 1. **Flash插件**：早期，许多文件上传插件（如Plupload）利用Flash实现跨域上传，但随着Flash逐渐被淘汰，这种方法已不推荐。 2. **...
Uploadify提供了一种优雅的方式来处理文件上传，包括预览、进度条显示、多文件上传等功能。使用Uploadify，你需要在HTML中定义一个input元素，并为其添加特定的class或ID以供插件识别： ```html ``` 然后在...
总的来说，Ajax上传文件是一种提升用户体验的有效方式。通过使用`AjaxForm`、`AjaxFileUpload`或`AjaxUpload`等工具，我们可以轻松地实现异步文件上传，同时还能处理上传进度、错误和服务器响应。记住，无论选择哪种...
本教程将探讨如何使用Apache Commons FileUpload库实现这两种上传方式：普通表单上传和使用jQuery进行AJAX后台上传。 首先，Apache Commons FileUpload是Java中一个强大的文件上传处理库，它扩展了Servlet API的...
这两种方法都是在Web应用中处理用户上传文件的常见方式，特别是当需要在后台处理文件且不刷新整个页面时，AJAX上传就显得尤为重要。 首先，我们来看**Spring MVC**。Spring MVC是Spring框架的一个模块，专门用于...
首先，文件上传是Web应用中常见的一种用户交互方式，允许用户将本地的文件（例如图片）传输到服务器进行存储或处理。在JSP（JavaServer Pages）中，我们可以使用Servlet和Apache Commons FileUpload库来实现文件上传...
这个压缩包提供了一种实现方式，即“带进度条的上传源码”，通过AJAX技术实现无刷新的文件上传，极大地提升了用户体验。让我们详细了解一下这个源码的核心知识点。 首先，**AJAX (Asynchronous JavaScript and XML)...
本教程将探讨两种不同的客户端上传方式：原生JavaScript和jQuery AJAX。这两种方法都可以与Asp.Net WebApi结合，实现用户友好的文件上传功能。 首先，我们要理解Asp.Net WebApi的核心概念。WebApi是一个用于构建...
在本场景中，"asp+ajax批量上传文件"是指利用ASP技术和AJAX（Asynchronous JavaScript and XML）来实现用户无需刷新整个页面即可进行多文件批量上传的功能。这通常涉及到前端与后端的协同工作，提高用户体验，因为...
本教程将重点讲解如何在Java环境下，通过表单和Ajax两种方式实现文件及图片的上传，并提供了一个可以直接在Eclipse中导入并运行的示例项目。让我们深入探讨这两个方法。 首先，我们来看表单上传。在HTML中，我们...
AjaxUpload则是实现异步文件上传的一种JavaScript库，它允许用户在不刷新整个页面的情况下进行文件上传，提高了用户体验。接下来，我们将详细讨论这两个知识点。 首先，**Spring** 是一个全面的后端应用框架，它...
总之，Ajax+ASP无刷新上传文件支持大文件是一种高效且实用的解决方案，它结合了Ajax的异步特性与ASP的服务器端处理能力，既能优化用户体验，又能处理大文件的上传需求。开发者在实际应用中，可以根据项目需求灵活...
在IT行业中，SpringMVC和Ajax是两种广泛使用的技术，它们在构建现代Web应用程序时起着至关重要的作用。本教程将深入探讨如何结合SpringMVC和Ajax实现文件上传功能。 首先，SpringMVC是Spring框架的一部分，它是一个...
11. **packed_jquery.js**和**UpFile.js**：这两个文件是JavaScript库，packed_jquery.js可能是压缩版的jQuery库，用于简化DOM操作和Ajax请求；而UpFile.js可能是自定义的上传脚本，包含了文件选择、预处理、Ajax...
Ajax上传文件时，浏览器将文件分块发送，服务器接收并处理每个块，然后返回当前进度信息。前端通过监听XMLHttpRequest对象的progress事件，获取到已上传的数据量与总数据量，计算出当前进度，并更新进度条。 2. ...
在IT行业中，Ajax（Asynchronous JavaScript and XML）和FancyUpload是两种常见的文件上传技术，它们都致力于提供更优秀的用户体验，尤其是对于Web应用程序中的文件上传功能。Ajax上传允许用户在不刷新整个页面的...
ps：Ajax技术基本上可以说是由google公司带起来的，但少Gmail中上传文件用的还是 IFrame，所以说使用IFrame来上传文件是最好的选择。 我在这里这里用的技术是jsp，其实asp，php等也是一样可以这么实现的