AjaxUpLoad.js使用实现文件上传
AjaxUpLoad.js的使用实现无刷新文件上传,如图。
图1 文件上传前
图2 文件上传后
1、创建页面并编写HTML
- 上传文档:
- <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>
2、引用AjaxUpload.js文件
- <script src="/js/common/AjaxUpload.js" type="text/javascript"></script>
3、编写JS脚本
- 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";
- }
4、创建/Common/UploadHandler.ashx处理程序
- <%@ WebHandler Language="C#" Class="UploadHandler" %>
- using System;
- using System.Web;
- using System.Text.RegularExpressions;
- using System.IO;
- public class UploadHandler : IHttpHandler {
- private string _filedir = ""; //文件目录
- /// <summary>
- /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
- /// </summary>
- /// <param name="context"></param>
- public void ProcessRequest (HttpContext context) {
- _filedir = context.Server.MapPath(@"/file/temp/");
- try
- {
- string result = "3";
- string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型
- if (fileType == "file")
- {
- result = UploadFile(context); //文档上传
- }
- else if (fileType == "img")
- {
- result = UploadImg(context); //图片上传
- }
- context.Response.Write(result);
- }
- catch
- {
- context.Response.Write("3");//3文件上传失败
- }
- }
- /// <summary>
- /// 文档上传
- /// </summary>
- /// <param name="context"></param>
- /// <returns></returns>
- private string UploadFile(HttpContext context)
- {
- int cout = context.Request.Files.Count;
- if (cout > 0)
- {
- HttpPostedFile hpf = context.Request.Files[0];
- if (hpf != null)
- {
- string fileExt = Path.GetExtension(hpf.FileName).ToLower();
- //只能上传文件,过滤不可上传的文件类型
- string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......";
- if (fileFilt.IndexOf(fileExt) <= -1)
- {
- return "1";
- }
- //判断文件大小
- int length = hpf.ContentLength;
- if (length > 2097152)
- {
- return "2";
- }
- Random rd = new Random();
- DateTime nowTime = DateTime.Now;
- string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName);
- if (!Directory.Exists(_filedir))
- {
- Directory.CreateDirectory(_filedir);
- }
- string fileName = _filedir + newFileName;
- hpf.SaveAs(fileName);
- return newFileName;
- }
- }
- return "3";
- }
- /// <summary>
- /// 图片上传
- /// </summary>
- /// <param name="context"></param>
- /// <returns></returns>
- private string UploadImg(HttpContext context)
- {
- int cout = context.Request.Files.Count;
- if (cout > 0)
- {
- HttpPostedFile hpf = context.Request.Files[0];
- if (hpf != null)
- {
- string fileExt = Path.GetExtension(hpf.FileName).ToLower();
- //只能上传文件,过滤不可上传的文件类型
- string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......";
- if (fileFilt.IndexOf(fileExt) <= -1)
- {
- return "1";
- }
- //判断文件大小
- int length = hpf.ContentLength;
- if (length > 204800)
- {
- return "2";
- }
- Random rd = new Random();
- DateTime nowTime = DateTime.Now;
- string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName);
- if (!Directory.Exists(_filedir))
- {
- Directory.CreateDirectory(_filedir);
- }
- string fileName = _filedir + newFileName;
- hpf.SaveAs(fileName);
- return newFileName;
- }
- }
- return "3";
- }
- #region IHttpHandler 成员
- public bool IsReusable
- {
- get { throw new NotImplementedException(); }
- }
- #endregion
- }
附件1:页面CSS样式
- /*上传文件*/
- .uploadFile{margin-bottom:10px;}
- /*上传图片*/
- .uploadImg{}
- .uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}
附件2:AjaxUpload.js文件
- /**
- * 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();
- }
- };
- })();
AjaxUpLoad.js使用实现文件上传的更多相关文章
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...
- js实现oss文件上传及一些问题
关于兼容性问题,ie8以下的可以使用4.x的版本 一.引入sdk和jq <script src="http://libs.baidu.com/jquery/2.0.0/jquery.m ...
- js+php实现文件上传显示文件上传进度条的插件
文件上传利器SWFUpload使用指南(swfupload官网) 上传文件显示进度条效果的插件swfupload.js
- js可以控制文件上传的速度吗?
为了减轻服务器负载,对于上传和下载的情况,我们需要进行流量控制,一般的方法是服务端做限流举措,比如很多ftp服务器,但是我想是不是可以使用前端js做呢? 顺着这个想法,我查了下资料,目前来看结论是No ...
- js实现大文件上传分片上传断点续传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- 005-html+js+spring multipart文件上传
一.概述 需求:通过html+js+java上传最大500M的文件,需要做MD5 消息摘要以及SHA256签名,文件上传至云存储 1.1.理解http协议 https://www.cnblogs.co ...
随机推荐
- Unity Camera属性
Camera属性 1.Clear Flags 清除标记:决定屏幕的那部分将被清除.当使用多个相机来描绘不同的游戏景象时,利用它是非常方便的. 2.Background 背景:在镜头中的所有元素描绘完成 ...
- LintCode-Word Search II
Given a matrix of lower alphabets and a dictionary. Find all words in the dictionary that can be fou ...
- ifame 跨域高度自适应
代码如下:var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; var iframehi ...
- PythonChallenge 2:爬虫和正则表达式
题目: 解题思路:题目里已经说的很清楚了,字符可能在网页的源代码里.右键查看网页源代码,发现其中有一段:find rare characters in the mess below.有些人是直接把下面 ...
- eclipse 下找不到或无法加载主类的解决办法[转]
转自:http://blog.sina.com.cn/s/blog_7ebc46500101gtff.html 有时候 Eclipse 会发神经,好端端的 project 就这么编译不了了,连 Hel ...
- angular入门系列教程目录
本系列教程的目标很明确,就是入门,会一步一步的从零到最终的能写出一个基本完整的应用.这个过程中不去纠结一些概念或者是如何实现等等深入的东西,只是停留在应用层. ps:如果条件允许的话,后续会有深入一点 ...
- 【转载】Ext中关于Ext.QuickTips.init()的使用
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:然嗄 原文地址:http://www.cnblogs.com/jia ...
- EXT4.2--Ext Designer 使用
前言: “画EXT”是一个美好的想法,如果有一款可视化工具能够只需进行拖拽而设计EXT,生成代码--那真是一件美丽的事.然而现实是,即使是为Eclipse装上EXT插件,用上idea,手写代码的提示也 ...
- text-align:-moz-center与text-align:-webkit-center区别与用法
最近发现各浏览器的不兼容,关于text-align:center这个很多浏览器不兼容. 1.测试发现:text-align:center在IE下是管用的. 2.text-align:-moz-cent ...
- 【DP】BZOJ 1260: [CQOI2007]涂色paint
1260: [CQOI2007]涂色paint Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 893 Solved: 540[Submit][Stat ...