AjaxUpLoad.js怎么实现文件上传
导读：收集整理的这篇文章主要介绍了AjaxUpLoad.js怎么实现文件上传，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来AjaxUpLoad.js怎么实现文件上传，AjaxUpLoad.js实现文件上传的注意事项有哪些，下面就...
收集整理的这篇文章主要介绍了AjaxUpLoad.js怎么实现文件上传，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来AjaxUpLoad.js怎么实现文件上传，AjaxUpLoad.js实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。AjaxUpLoad.js的使用实现无刷新文件上传，如图。
图1 文件上传前
图2 文件上传后
1、创建页面并编写HTML
上传文档:
p 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="删除" />
/p>
上传图片:
p 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="删除" />
/p>
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 p = document.createElement('p');
return function (html) {
p.innerHTML = html;
var el = p.FirstChild;
return p.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 * p>
input type='file' />
/p>
*/ _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 p = document.createElement("p");
addStyles(p, {
'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 (p.style.opacity !== "0") {
if (typeof(p.filters) == 'undefined') {
throw new Error('Opacity not supported by the browser');
}
p.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';
}
);
p.appendChild(input);
document.body.appendChild(p);
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 p = self._input.parentNode;
copyLayout(self._button, p);
p.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 // p ->
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();
}
}
;
}
)();
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jQuery怎么实现左右滑动的toggle
在Vuejs里利用index对第一项添加class的方法
以上就是AjaxUpLoad.js怎么实现文件上传的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： AjaxUpLoad.js怎么实现文件上传
本文地址： https://pptw.com/jishu/584025.html