aspxuploadcontrol文件上传技术文档
文件上传利器SWFUpload使用指南
"post_param_name_1" :"post_param_value_1",
"post_param_name_2" :"post_param_value_2",
"post_param_name_n" :"post_param_value_n"
},
use_query_string:false,
一、配置参数对象中的常用属性及说明
属性
类型
默认值
描述
upload_url
String
处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址
preserve_relative_urls
Boolean
false
如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址,以达到更好的兼容性
file_upload_limit
Number
指定最多能上传多少个文件,当上传成功的文件数量达到了这个最大值后,就不能再上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
file_queue_limit
Number
指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后,等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时,则取那个更小的值
...等等
我们看到要实现一个swfupload上传功能很简单,就是实例化一个swfupload对象。但繁琐的地方就在于实例化实要用到的参数配置对象,以及各种事件的发生时机以和提供的参数。所以重点来了。下面几个表格对开发中要用到的东西列举了出来,虽然已经蛮多了,但并不是swfupload的全部,我列出来的只是常用的。要查看完整的文档,请到swfupload官网上查询。
ajaxfileupload事例
文章标题:深度解析AjaxFileUpload功能与应用在Web开发中,AjaxFileUpload是一个十分有用的功能,它可以让用户在不刷新整个页面的情况下上传文件,极大地提升了用户体验。
本文将从AjaxFileUpload的定义、原理、优缺点以及实际应用等方面进行全面剖析,帮助读者更深入地理解和应用这一功能。
一、AjaxFileUpload的定义AjaxFileUpload是一种通过Ajax技术实现文件上传的功能。
传统的文件上传通常需要使用表单,并在文件上传完成后整个页面会进行刷新。
而AjaxFileUpload可以在不刷新整个页面的情况下实现文件上传,大大提升了用户体验。
二、AjaxFileUpload的原理1. 用户点击上传按钮。
2. 页面通过Ajax技术将文件传输给服务器。
3. 服务器接收到文件后进行处理。
4. 上传完成后,页面通过Ajax将上传结果返回给用户。
三、AjaxFileUpload的优缺点1. 优点:1) 提升用户体验,不会造成页面的刷新。
2) 可以实现多文件上传,提高了效率。
3) 能够根据需求进行自定义配置,提高了灵活性。
2. 缺点:1) 不支持低版本的IE浏览器。
2) 由于使用了Ajax技术,可能会增加服务器负担。
3) 对于大文件的上传可能存在一定的性能问题。
四、AjaxFileUpload的实际应用AjaxFileUpload功能在实际应用中有着广泛的应用,常见的应用场景包括:1. 全球信息湾注册页面的头像上传功能。
2. 在线编辑器的附件上传功能。
3. 电商全球信息湾订单中的商品图片上传功能。
五、我的个人观点和理解AjaxFileUpload功能在Web开发中有着重要的作用,可以大大提升用户体验,但在实际应用中需要注意兼容性和性能问题。
我个人认为,在合适的场景下,合理地使用AjaxFileUpload功能,可以为用户带来更好的使用体验,同时也能够提高页面的交互性和效率。
借助commons-fileupload实现文件上传
借助commons-fileupload实现⽂件上传⼀、⽂件上传的原理分析 1、⽂件上传的必要前提 a、表单的method必须是post b、表单的enctype属性必须是multipart/form-data类型的。
enctype默认值:application/x-www-form-urlencoded 作⽤:告知服务器,请求正⽂的MIME类型 application/x-www-form-urlencoded : username=abc&password=123 ServletRequest.getParameter(String name);该⽅法是专门读取该类型的⽅法 multipart/form-data: 2、借助commons-fileupload组件实现⽂件的上传 a、拷贝jar包:commons-fileupload.jar commons-io.jar b、实现原理 3、乱码问题 a、普通字段的乱码 FileItem.getString(String charset);编码要和客户端⼀致 b、上传的中⽂⽂件名乱码 request.setCharacterEncoding("UTF-8");编码要和客户端⼀致 4、具体实现前台upload.jsp代码如下<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>⽂件上传</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><form action="${pageContext.request.contextPath}/servlet/UploadServlet3" method="post" enctype="multipart/form-data"> name:<input name="name"/><br/>file1:<input type="file" name="f1"/><br/>file2:<input type="file" name="f2"/><br/><input type="submit" value="上传"></form></body></html>后台servlet代码package com.itheima.servlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.io.UnsupportedEncodingException;import java.util.List;import java.util.UUID;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import mons.fileupload.FileItem;import mons.fileupload.FileUploadBase;import mons.fileupload.FileUploadException;import mons.fileupload.disk.DiskFileItemFactory;import mons.fileupload.servlet.ServletFileUpload;import mons.io.FilenameUtils;//详解public class UploadServlet3 extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();System.out.print(request.getRemoteAddr());boolean isMultipart = ServletFileUpload.isMultipartContent(request);if(!isMultipart){throw new RuntimeException("请检查您的表单的enctype属性,确定是multipart/form-data");}DiskFileItemFactory dfif = new DiskFileItemFactory();ServletFileUpload parser = new ServletFileUpload(dfif);// parser.setFileSizeMax(3*1024*1024);//设置单个⽂件上传的⼤⼩// parser.setSizeMax(6*1024*1024);//多⽂件上传时总⼤⼩限制List<FileItem> items = null;try {items = parser.parseRequest(request);}catch(FileUploadBase.FileSizeLimitExceededException e) {out.write("上传⽂件超出了3M");return;}catch(FileUploadBase.SizeLimitExceededException e){out.write("总⽂件超出了6M");return;}catch (FileUploadException e) {e.printStackTrace();throw new RuntimeException("解析上传内容失败,请重新试⼀下");}//处理请求内容if(items!=null){for(FileItem item:items){if(item.isFormField()){processFormField(item);}else{processUploadField(item);}}}out.write("上传成功!");}private void processUploadField(FileItem item) {try {String fileName = item.getName();//⽤户没有选择上传⽂件时if(fileName!=null&&!fileName.equals("")){fileName = UUID.randomUUID().toString()+"_"+FilenameUtils.getName(fileName);//扩展名String extension = FilenameUtils.getExtension(fileName);//MIME类型String contentType = item.getContentType();if(contentType.startsWith("image/")){//分⽬录存储:⽇期解决// Date now = new Date();// DateFormat df = new SimpleDateFormat("yyyy-MM-dd");//// String childDirectory = df.format(now);//按照⽂件名的hashCode计算存储⽬录String childDirectory = makeChildDirectory(getServletContext().getRealPath("/WEB-INF/files/"),fileName); String storeDirectoryPath = getServletContext().getRealPath("/WEB-INF/files/"+childDirectory);File storeDirectory = new File(storeDirectoryPath);if(!storeDirectory.exists()){storeDirectory.mkdirs();}System.out.println(fileName);item.write(new File(storeDirectoryPath+File.separator+fileName));//删除临时⽂件}}} catch (Exception e) {throw new RuntimeException("上传失败,请重试");}}//计算存放的⼦⽬录private String makeChildDirectory(String realPath, String fileName) {int hashCode = fileName.hashCode();int dir1 = hashCode&0xf;// 取1~4位int dir2 = (hashCode&0xf0)>>4;//取5~8位String directory = ""+dir1+File.separator+dir2;File file = new File(realPath,directory);if(!file.exists())file.mkdirs();return directory;}private void processFormField(FileItem item) {String fieldName = item.getFieldName();//字段名String fieldValue;try {fieldValue = item.getString("UTF-8");} catch (UnsupportedEncodingException e) {throw new RuntimeException("不⽀持UTF-8编码");}System.out.println(fieldName+"="+fieldValue);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}} 5、关于临时⽂件问题 a、DiskFileItemFactory public void setRepository(File repository):设置临时⽂件的存放⽬录 public void setSizeThreshold(int sizeThreshold):设置缓存的⼤⼩ b、 ⽂件上传时,⾃⼰⽤IO流处理,⼀定要在流关闭后删除临时⽂件。
AjaxFileUpload文件上传
AjaxFileUpload文件上传组件(php+jQuery+ajax)jQuery插件AjaxFileUpload可以实现ajax文件上传,下载地址:/contents/ajaxfileupload/ajaxfileupload.js主要参数说明:1、url表示处理文件上传操作的文件路径,可以测试URL是否能在浏览器中直接访问,如上:upload.php2、fileElementId表示文件域ID,如上:fileToUpload3、secureuri是否启用安全提交,默认为false4、dataType数据数据,一般选json,javascript的原生态5、success提交成功后处理函数6、error提交失败处理函数需要了解相关的错误提示1、SyntaxError: missing ; before statement错误如果出现这个错误就需要检查url路径是否可以访问2、SyntaxError: syntax error错误如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误3、SyntaxError: invalid property id错误如果出现这个错误就需要检查属性ID是否存在4、SyntaxError: missing } in XML expression错误如果出现这个错误就需要检查文件域名称是否一致或不存在5、其它自定义错误大家可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多。
示例代码:Upload.html<!doctype html><html><head><!-- <meta charset="UTF-8">--><title>ajaxfileupload图片上传控件</title><script src="/jquery-1.6.3.min.js"></script><script src="js/ajaxfileupload.js"></script></head><body><input type="file" size="20" name="fileToUpload" class="input" id="fileToUpload"><button id="buttonUpload">上传</button><script>$(function () {$('#buttonUpload').click(function () {$.ajaxFileUpload({url:'upload.php',//处理图片脚本secureuri :false,fileElementId :'fileToUpload',//file控件iddataType : 'json',success: function (data,status) {if(typeof (data.error) != 'undefined' ){if(data.error != ''){alert(data.error);}else{alert(data.msg);}}},error: function (data,status,e) {alert(e);}});return false;});});</script></body></html>Upload.php文件<?php/*** Created by PhpStorm.* User: Administrator* Date: 2015/8/7* Time: 11:15*/$res["error"] = "";//错误信息$res["msg"] = "";//提示信息if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"c:\\qq.jpg ")){$res["msg"] = "ok";}else{$res["error"] = "error";}echo json_encode($res);?>jQuery HTMLjQuery—获取内容和属性jQuery DOM操作获得内容:text()、html()、以及val()三个简单的用于DOM操作的jQuery方法:。
ajaxfileupload用法
ajaxfileupload用法
AjaxFileUpload一个强大的Java库,用于实现Ajax文件上传。
这种文件上传组件在表单处理中有重要的作用,它能够为Web用程序增加复杂的动态功能。
它的基本原理是使用XMLHttpRequest象实现Ajax文件上传,大大提高了用户体验和应用性能。
AjaxFileUpload基本用法可分为以下几个步骤:
1.先,初始化AjaxFileUpload对象,需要设置文件上传的URL 以及传输的数据类型,以及处理文件上传的JavaScript数;
2.后,添加选择要上传的文件;
3.着,编写处理文件上传时需要执行的JavaScript数;
4.入发送文件状态,向服务器发送Ajax求;
5.后,获取服务器发送的响应结果,并执行处理函数以反馈给用户相应的操作结果。
以上就是AjaxFileUpload基本用法,它的优点在于可以实现异步文件上传,减少了前端和后端之间发送请求和响应的次数,进而提高了用户体验和应用性能。
- 1 -。
AjaxUpLoad.js实现文件上传功能
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 ( /ajax-upload/ )* Copyright (c) Andris Valums* Licensed under the MIT license ( /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* /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 (/)if (document.documentElement.getBoundingClientRect) {// Get Offset using getBoundingClientRect// /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 ievar 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 offsetsvar 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*/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 scriptaction: 'upload.php',// File upload namename: 'userfile',// Additional data to senddata: {},// Submit file as soon as it's selectedautoSubmit: 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 hoveredhoverClass: 'hover',// Class applied to button when AU is disableddisabledClass: 'disabled',// When user selects a file, useful with autoSubmit disabled// You can return false to cancel uploadonChange: function (file, extension) {},// Callback to fire before file is uploaded// You can return false to cancel uploadonSubmit: 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 defaultsfor (var i in options) {if (options.hasOwnProperty(i)) {this._settings[i] = options[i];}}// button isn't necessary a dom elementif (button.jquery) {// jQuery object was passedbutton = button[0];} else if (typeof button == "string") {if (/^#.*/.test(button)) {// If jQuery user passes #elementId don't break itbutton = 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 linkaddEvent(button, 'click', function (e) {if (e && e.preventDefault) {e.preventDefault();} else if (window.event) {window.event.returnValue = false;}});}// DOM elementthis._button = button;this._input = null;// If disabled clicking on button won't do anythingthis._disabled = false;// if the button was disabled before refresh if will remain// disabled in FireFox, let's fix itthis.enable();this._rerouteClicks();};// assigning methods to our classAjaxUpload.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 inputif (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 filethis._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._);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 filterif (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 itvar file = fileFromPath(input.value);if (false === self._settings.onChange.call(self, file, getExt(file))) { self._clearInput();return;}// Submit form when value is changedif (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 fileinput.parentNode.style.visibility = 'hidden';});document.body.appendChild(div);this._input = input;},_clearInput: function () {if (!this._input) {return;}// this._input.value = ''; Doesn't work in IE6removeNode(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 requestvar form = toElement('<form method="post" enctype="multipart/form-data"></form>'); form.setAttribute('action', settings.action);form.setAttribute('target', );form.style.display = 'none';document.body.appendChild(form);// Create hidden input element for each data keyfor (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 responseself = this,settings = this._settings;addEvent(iframe, 'load', function () {if ( // For Safariiframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||// For FF, IEiframe.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 FF3setTimeout(function () {removeNode(iframe);},0);}return;}var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document; // fixing Opera 9.26,10.00if (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 browsersreturn;}// fixing Opera 9.64if (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 secreturn;}var response;if (doc.XMLDocument) {// response is a xml document Internet Explorer propertyresponse = doc.XMLDocument;} else if (doc.body) {// response is html document or plain textresponse = 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/htmlif (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 documentresponse = 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 frametoDeleteFlag = true;// Fix IE mixed content issueiframe.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 uploadif (false === settings.onSubmit.call(this, file, getExt(file))) {this._clearInput();return;}// sending requestvar 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 upremoveNode(form);form = null;removeNode(this._input);this._input = null;// Get response from iframe and fire onComplete event when readythis._getResponse(iframe, file);// get ready for next requestthis._createInput();}};})();以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
$.ajaxfileupload用法
$.ajaxfileupload用法在Web开发中,文件上传是一种常见的操作,而使用Ajax技术可以实现异步文件上传,提高页面性能和用户体验。
jQuery中的$.ajaxFileUpload方法提供了一种简单易用的方式来实现文件上传功能。
$.ajaxFileUpload方法用于通过Ajax方式上传文件,支持多文件上传和回调函数的使用。
它接受三个参数:文件路径、回调函数和可选配置参数。
通过该方法,可以实现文件上传的异步操作,避免了页面刷新带来的影响,提高了页面性能。
二、用法示例```javascript//创建一个用于上传文件的表单元素varform=$('<form/>',{'method':'POST','enctype':'multipart/form-data'}).appendTo('body');//添加文件输入框varinput=$('<input/>',{'type':'file','name':'file','value':''}).appendTo(form);//触发文件选择器,选择文件input.trigger('click');//添加文件到表单中input.on('change',function(){varfiles=input.prop('files');if(files&&files.length>0){//创建AjaxFileUpload对象varupload=newAjaxFileUpload(form,{//配置选项action:'/upload',//上传接口地址autoSubmit:false,//不自动提交表单responseType:'json',//返回数据类型为JSONfileVal:'file',//文件字段名onComplete:function(data){//上传完成后回调函数console.log(data);//打印返回数据//TODO:处理上传结果,更新页面等操作},onError:function(error){//上传过程中出现错误时回调函数console.log(error);//打印错误信息//TODO:处理上传错误,显示错误提示等操作}});//开始上传文件upload.upload();}else{console.log('请选择文件');//输出提示信息}});```在上述示例中,首先创建了一个表单元素和一个文件输入框,并设置了表单的enctype属性为multipart/form-data,用于多文件上传。
FileUpload(文件上传)
FileUpload(⽂件上传)⼀句话⽊马<?php@eval($_POST['key']);>/*eval(phpcode)eval() 函数把字符串按照 PHP 代码来计算。
该字符串必须是合法的 PHP 代码,且必须以分号结尾。
*/通常是由于对上传⽂件的类型、内容没有进⾏严格的过滤、检查,使得攻击者可以通过上传⽊马获取服务器的webshell权限,因此⽂件上传漏洞带来的危害常常是毁灭性的,Apache、Tomcat、Nginx等都曝出过⽂件上传漏洞。
Lowbasename(path,suffix)函数返回路径中的⽂件名部分,如果可选参数suffix为空,则返回的⽂件名包含后缀名,反之不包含后缀名。
我们看到服务器对上传的⽂件类型、内容或是⽂件⼤⼩都没有做任何的检查、过滤,存在明显的⽂件上传漏洞,⽣成上传路径后,服务器会检查是否上传成功并返回相应提⽰信息。
这段代码的核⼼就是验证是否有接收⽂件($_POST[‘Upload’])$target_path = DVWA_WEB_PAGE_TO_ROOT . "hackable/uploads/";DVWA_WEB_PAGE_TO_ROOT=E:\phpStudy2019_64\phpstudy_pro\WWW\DVWA$target_path=E:\phpStudy2019_64\phpstudy_pro\WWW\DVWA/hackable/uploads/因此最终你上传的⽂件的最终路径为:$target_path=E:\phpStudy2019_64\phpstudy_pro\WWW\DVWA\hackable\uploads/123.jpg123.jpg就是你要上传的⽬标⽂件。
漏洞利⽤⽂件上传漏洞的利⽤条件:1.能够成功上传⽊马⽂件2.上传⽂件必须能够被执⾏3.上传⽂件的路径必须可知上传⼀句话⽊马上传成功,并返回上传路径打开中国菜⼑,右键添加,(这个url想了⼀会⼉,两个../返回上级,回到了127.0.0.1/dvwa/)然后菜⼑就会通过向服务器发送包含key参数的post请求,在服务器上执⾏任意命令,获取webshell权限。
ajaxFileupload实现多文件上传功能
ajaxFileupload实现多⽂件上传功能打开google 搜索"ajaxFileupload' ‘多⽂件上传"可以搜到许许多多类似的,那我为什么还要写⼀下呢?⼀个是对之前⼤神的贡献表⽰感谢;⼆个是⾃⼰知识的总结;三个是⾃⼰在原有的基础上改动了下,在此记录,可能帮助其他朋友。
⽤过这个插件的都知道这个插件的基本⽤法,我就不废话,直接上代码。
我需要实现多个⽂件上传,之前的做法是定义多个不同id的input,然后把ajaxfileuplod⽅法放在for循环⾥,这个⽅法是在⽹上看到的,我觉得不怎么好,后⾯在⽹上找到的,就⾼级点了,直接改源码(因为作者好久没有跟新了,也确实满⾜不了要求了)。
接下来看看我是怎么改的。
引⽤⽹上的做法:1、看没有修改前的代码var oldElement = jQuery('#' + fileElementId);var newElement = jQuery(oldElement).clone();jQuery(oldElement).attr('id', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);很容易看出,这个就是把id为什么的input加到from⾥去,那么要实现多个⽂件上传,就改成下⾯的样⼦:if(typeof(fileElementId) == 'string'){fileElementId = [fileElementId];}for(var i in fileElementId){var oldElement = jQuery('#' + fileElementId[i]);var newElement = jQuery(oldElement).clone();jQuery(oldElement).attr('id', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);}这样改之后,初始化的代码就要这么写:$.ajaxFileUpload({url:'/ajax.php',fileElementId:['id1','id2']//原先是fileElementId:'id' 只能上传⼀个});到这⾥,确实可以上传多个⽂件,但是对于我来说新问题⼜来,多个id,我的界⾯的⽂件不是固定的,是动态加载的,那么id 要动态⽣成,我觉得太⿇烦,为什么不取name呢?然后把以上代码改为如下:if(typeof(fileElementId) == 'string'){fileElementId = [fileElementId];}for(var i in fileElementId){//按name取值var oldElement = jQuery("input[name="+fileElementId[i]+"]");oldElement.each(function() {var newElement = jQuery($(this)).clone();jQuery(oldElement).attr('id', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);});}这样改了那么就可以实现多组多个⽂件上传,接下来看我是怎么应⽤的。
使用FileUpload组件上传文件
使⽤FileUpload组件上传⽂件⼀、进⾏⽂件上传时, 表单需要做的准备1.请求⽅式为 POST:<form action="uploadServlet" method="post" ... >2. 使⽤ file 的表单域: <input type="file" name="file"/>3. 使⽤ multipart/form-data 的请求编码⽅式:<form action="uploadServlet" method="post" enctype="multipart/form-data"> File: <input type="file" name="file"/> <input type="submit" value="Submit"/></form>4. 关于 enctypeapplication/x-www-form-urlencoded:表单 enctype 属性的默认值。
这种编码⽅案使⽤有限的字符集,当使⽤了⾮字母和数字时,必须⽤”%HH”代替(H 代表⼗六进制数字)。
对于⼤容量的⼆进制数据或包含⾮ ASCII 字符的⽂本来说,这种编码不能满⾜要求。
multipart/form-data:form 设定了enctype=“multipart/form-data”属性后,表⽰表单以⼆进制传输数据。
⼆、服务端不能再使⽤ request.getParameter() 等⽅式获取请求信息. 获取不到, 因为请求的编码⽅式已经改为 multipart/form-data, 以⼆进制的⽅式来提交请求信息。
ajaxfileupload 参数
ajaxfileupload 参数
AjaxFileUpload是一个在中实现AJAX文件上传的扩展控件。
它非常灵活,可以通过一些参数进行自定义配置。
以下是一些常用的 AjaxFileUpload 参数:
1. AllowedFileExtensions:允许上传文件的扩展名,多个扩展名之间用逗号分隔。
2. MaximumNumberOfFiles:最大允许上传的文件数量。
3. MaximumFileSize:最大允许上传的文件大小,以字节为单位。
4. OnUploadComplete:文件上传完成后触发的事件。
5. OnClientUploadComplete:客户端文件上传完成后触发的事件。
6. OnClientUploadError:客户端文件上传错误时触发的事件。
7. OnClientUploadStart:客户端文件上传开始时触发的事件。
8. OnClientUploadProgressChanged:客户端文件上传进度变化时触发的事件。
9. OnClientUploadCompleteAll:所有文件上传完成后触发的事件。
10. ThrobberID:上传过程中显示的加载动画的元素 ID。
通过这些参数的配置,可以让 AjaxFileUpload 满足不同的需求,实现更加自定义化的文件上传功能。
- 1 -。
easyupload 手册
EasyUpload 是一个简单易用的文件上传组件,可以帮助开发者快速实现文件上传功能。
以下是EasyUpload 的使用手册:1.安装EasyUpload可以通过下载源代码或使用包管理器来安装EasyUpload。
安装完成后,将EasyUpload 导入到你的项目中,并确保你的项目已经引入了相关的依赖库。
1.创建文件上传表单在HTML 中创建一个文件上传表单,并设置相应的表单元素属性。
例如:php复制代码<form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="fileToUpload" id="fileToUpload"><input type="submit" value="上传文件" name="submit"></form>1.处理文件上传请求在服务器端创建一个处理文件上传请求的PHP 脚本。
例如:php复制代码<?phprequire'vendor/autoload.php'; // 导入 EasyUpload 自动加载文件use Aws\S3\S3Client; // 导入 AWS S3 SDKuse EasyUpload\Upload; // 导入 EasyUpload 类$client = S3Client::factory(['credentials' => ['key' => 'YOUR_AWS_ACCESS_KEY','secret' => 'YOUR_AWS_SECRET_ACCESS_KEY',],'region' => 'YOUR_AWS_REGION','version' => 'latest',]);$bucket = 'YOUR_AWS_BUCKET';$keyPrefix = 'uploads/'; // 文件存储前缀$upload = new Upload($client, $bucket, $keyPrefix);$result = $upload->handleUpload($_FILES['fileToUpload']); // 处理文件上传请求1.处理上传结果EasyUpload 的handleUpload() 方法会返回一个包含上传结果信息的关联数组。
文件 上传 方法
文件上传方法
文件上传方法可以通过以下几种方式实现:
1. 表单提交:在HTML中设置一个文件类型的input标签,用户可以点击该标签选择待上传的文件。
当用户提交表单时,表单数据会包含所选文件的二进制数据,后台服务器可以接收并保存该文件。
2. HTTP请求:使用HTTP POST请求上传文件。
可以使用HTTP工具库(如axios、jQuery.ajax等)在前端发送POST请求,将文件以二进制数据的形式发送给后台服务器。
3. AJAX上传:通过AJAX技术实现文件上传。
可以使用FormData对象将文件数据封装为表单数据,然后使用XMLHttpRequest(XHR)对象发送POST请求,将FormData对象发送到后台服务器。
4. FTP上传:使用FTP协议实现文件上传。
FTP是一种文件传输协议,可以使用FTP客户端软件(如FileZilla等)将本地文件上传到远程服务器。
5. 第三方库/插件:使用第三方库或插件来简化文件上传操作。
一些流行的文件上传库/插件有Dropzone.js、Plupload、Fine Uploader等,它们提供了丰富的上传功能和用户友好的界面。
无论使用哪种方式,都需要注意安全性和性能问题。
例如,限制上传文件的大小、类型和数量,对上传文件进行验证和过滤,以及进行合理的上传速度控制,避免对服务器造成过大负载。
ASP.NET中FileUpload文件上传控件应用实例_
中FileUpload文件上传控件应用实例_用法 FileUpload 控件,可以为用户供应一种将文件从用户的计算机发送到服务器的方法。
该控件在允许用户上载图片、文本文件或其他文件时很有用。
要上载的文件将在回发期间作为扫瞄器恳求的一部分提交给服务器。
在文件上载完毕后,您可以用代码管理该文件。
大致了解了一下FileUpload,让我们来看一下FileUpload 几个实际应用中问题的处理方法。
1.一次上传多个文件要一次上传多个文件,我们可以像传单个文件那样对每个文件单独进行处理,除此之外,我们还可以用法HttpFileCollection类捕获从Request对象发送来的全部文件,然后再单独对每个文件进行处理,代码如下:代码如下:protected void Button1_Click(object sender, EventArgs e){string filepath = Server.MapPath("upload") + "\\"; HttpFileCollection uploadFiles = Request.Files; for (int i = 0; i uploadFiles.Count; i++){HttpPostedFile postedFile = uploadFiles[i]; try{if (postedFile.ContentLength 0){Label1.Text += "文件 #" + (i + 1) + ":" + System.IO.Path.GetFileName(postedFile.FileName) + "br/";postedFile.SaveAs(filepath + System.IO.Path.GetFileName(postedFile.FileName)); }}catch (Exception Ex){Label1.Text += "发生错误: " + Ex.Message; }}}2.上传文件类型的验证对上传文件类型的验证既可以在客户端进行,也可以在服务器端进行。
easyupload 手册
easyupload 手册摘要:1.什么是easyupload?2.easyupload的特点和优势3.如何使用easyupload?4.easyupload的应用场景5.常见问题与解决方案正文:一、什么是easyupload?easyupload是一款便捷的文件上传工具,旨在简化文件上传流程,提高工作效率。
这款工具适用于各种平台,如个人电脑、智能手机、企业内部系统等,可以帮助用户轻松地将文件上传至目标服务器或云端存储。
二、easyupload的特点和优势1.简单易用:界面简洁,操作直观,无需额外学习成本。
2.兼容性强:支持多种操作系统和设备,满足跨平台需求。
3.传输速度快:利用多线程技术和断点续传功能,提高上传速度。
4.安全性高:采用加密传输,保护用户文件隐私。
5.扩展性强:支持各种文件格式和大小,满足不同场景需求。
三、如何使用easyupload?1.下载和安装easyupload客户端:访问官方网站或应用商店,下载并安装适合您设备的客户端。
2.注册和登录:按照提示注册账号并登录,以便于管理上传任务和查看上传进度。
3.选择文件:浏览本地文件,选择需要上传的文件。
4.设置上传参数:根据需求设置上传目标、文件名、格式等参数。
5.开始上传:确认无误后,点击开始上传,等待文件传输完成。
四、easyupload的应用场景1.企业内部文件共享:员工之间快速传递文件,提高协作效率。
2.跨平台文件传输:在不同设备间同步文件,避免数据丢失。
3.云端备份:将重要文件上传至云端,确保数据安全。
4.大型文件分发:将大量文件分发给多个用户,节省时间和精力。
五、常见问题与解决方案1.文件上传失败:检查文件是否合法,网络是否畅通,上传参数设置是否正确。
2.传输速度慢:优化网络环境,尝试使用其他上传通道。
3.文件大小限制:了解目标服务器的大小限制,适当压缩或分割文件。
4.加密解密问题:确保加密算法与目标服务器兼容,必要时寻求技术支持。
OA自动化-SWFUpload多文件上传手册 精品
SWFUpload中文文档地址是:http://.v-sky./doc/swfupload/Documentation.html网官上的DEMO为:/v220/index.htm下载地址:http://code.google./p/swfupload/SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中<inputtype="file" />标签提供的文件上传功能。
SWFUpload提供的主要功能:•在文件选择对话框中能够进行文件多选•页面无刷新的上传•提供上传进度的事件回调,实时显示上传进度•良好的浏览器兼容性•采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等) ••对FLASH 9和FLASH 10播放器的支持(V2.2.0版本放弃了对Flash 8的支持)SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。
它将浏览器的中UI交给开发人员来控制。
开发人员能够利用XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。
然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。
不幸的是Flash Player 10 更严格的安全机制迫使我们不得不将一个Flash Button放入Flash影片中。
SWFUpload提供API供开发者通过图片、文字、CSS 的方式来自定制更灵活的UI显示。
SWFUpload v2SWFUpload v2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且提供一套有用的插件。
新的功能包括:•兼容了Flash Player 10的安全限制问题•在文件上传的同时能够发送额外的POST数据•针对每一个文件上传发送POST/GET数据•更直观的事件回调•动态修改实例设置•接收服务端返回的数据•非取消形式的停止文件上传•自定义上传的顺序•支持单文件、多文件的文件的选择•文件入队数量,文件上传数量和文件大小的限制•更合理地处理0字节的文件•针对每个文件在上传前都提供一个最后确认的时间回调•解决了v1.0.2版本中未描述到的关于Flash的bug•解决的v1.0.2中的bug:o在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug 过程)o在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash 无法加载o Race-conditions when files are cached•兼容 FormsSWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展概述传统的HTML上传标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。
使用SmartUpload实现文件上传功能.共26页
56、书不仅是生活,而且是现在、过 去和未 来文化 生活的 源泉。 ——库 法耶夫 57、生命不可能有两次,但许多人连一 次也不 善于度 过。— —吕凯 特 58、问渠哪得清如许,为有源头活水来 。—— 朱熹 59、我的努力求学没有得到别的好处, 只不过 是愈来 愈发觉 自己的 无知。 ——笛 卡儿
拉
60、生活的道路一旦选定,就要勇敢地 走到底 ,决不 回头。 ——左
使用SmartUpload实现文件上传功能.
11、获得的成功越大,就越令人高兴 。野心 是使人 勤奋的 原因, 节制使 人枯萎 。 12、不问收获,只问耕耘。如同种树 ,先有 根茎, 再有枝 叶,尔 后花实 ,好好 劳动, 不要想 太多, 那样只 会使人 胆孝懒 惰,因 为不实 践,甚 至不接 触社个字,但 常看常 新。 14、我在心里默默地为每一个人祝福 。我爱 自己, 我用清 洁与节 制来珍 惜我的 身体, 我用智 慧和知 识充实 我的头 脑。 15、这世上的一切都借希望而完成。 农夫不 会播下 一粒玉 米,如 果他不 曾希望 它长成 种籽; 单身汉 不会娶 妻,如 果他不 曾希望 有小孩 ;商人 或手艺 人不会 工作, 如果他 不曾希 望因此 而有收 益。-- 马钉路 德。
C#+aspx+ajaxfileupload实现文件上传
C#+aspx+ajaxfileupload实现⽂件上传Html 代码及调⽤⽅法:1. <!DOCTYPE html>2.3. <html xmlns="/1999/xhtml">4. <head runat="server">5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>6. <title></title>7. </head>8. <body>9. <form id="form1" runat="server">10. <div style="margin:0 auto;text-align:center;">11. <p>12. <asp:Image ID="imgShow" runat="server" Width="120" Height="120" ImageUrl="~/assets/images/nophoto.gif"/>13.14. </p>15. <p> <input name="file" id="fUpLoad" type="file"/><input type="hidden" id="Hfurl" runat="server"/>16. <input type="hidden" id="hfStatus" runat="server"/></p>17. <p>18. <input type="button" value="上传" id="iUpLoad"/>19. </p>20. </div>21. <script src="assets/js/jquery-1.8.2.min.js"></script>22. <script src="plugins/uploadify/ajaxfileupload.js"></script>23. <script type="text/javascript">24. $(function () {25. $("#iUpLoad").click(function () {26. ajaxFileUpload();27. })28. })29. function ajaxFileUpload() {30. $.ajaxFileUpload31. (32. {33. url: 'UpLoadHeadImg.aspx?random=' + Math.random(), //⽤于⽂件上传的服务器端请求地址34.35. //secureuri: false, //⼀般设置为false36. fileElementId: 'fUpLoad', //⽂件上传空间的id属性 <input type="file" id="file" name="file" />37. dataType: 'json', //返回值类型⼀般设置为json38. success: function (data, status) //服务器成功响应处理函数39. {40. alert(data);41. $("#imgShow").attr("src", data.imgurl);42. $("#Hfurl").val(data.imgurl); //alert($("#hfDel").val());43. if (typeof (data.error) != 'undefined') {44. if (data.error != '') {45. alert(data.error);46. } else {47. //alert(data.msg);48. }49. }50. },51. error: function (data, status, e)//服务器响应失败处理函数52. {53. alert(e);54. }55. }56. )57. return false;58. }59. </script>60. <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />61. </form>62. </body>63. </html>后台代码:1. protected void Page_Load(object sender, EventArgs e)2. {3. log4net.ILog log = log4net.LogManager.GetLogger(this.GetType().Name);4. int count = Request.Files.Count;5. string res = string.Empty;6. string error = string.Empty;7. string imgurl = string.Empty; ;8. if (count > 0)9. {10. try11. {12. HttpPostedFile File1 = Request.Files[0];13. string suffix = Path.GetExtension(File1.FileName).ToLower();14. string path = Server.MapPath("UpLoadImg/HeadImage"); //⽤来⽣成⽂件夹15.16. if (File1.ContentLength / 4096 > 4096)17. {18. error = "单张头像不能超过4096K(4M),请重新选择头像上传。
HttpApplication实战大文件上传(第四篇)
HttpApplication实战⼤⽂件上传(第四篇) 在 1.1中,⽂件在上传过程中将被全部保存在内存中,对于⼤⽂件来说,会造成内存空间的过度使⽤,可能会招致恶意攻击。
为了解决这个问题,在配置⽂件中提供了⼀个参数来控制上传⽂件的尺⼨,这个配置参数定义在System.Web元素的⼦元素HttpRuntime元素中。
maxRequestLength属性⽤来设置允许的最⼤请求长度,这个参数的单位是KB,默认情况下,参数的值为4096,也就是最⼤能上传⼤约4M⼤⼩的⽂件。
如果希望上传10M的⽂件,可以设置配置⽂件WebConfig.config如下:<system.web><httpRuntime maxRequestLength="10240"/></system.web> 在 2.0之后,上传的⽂件可以缓存到⽂件中,以减少对内存的消耗。
httpRuntime元素提供了⼀个新的配置参数requestLengthDiskThreshold属性,⽤来设置⼀个上传⽂件尺⼨的临时⼤⼩值,超过这个值,请求的内容将会被保存到⽂件中。
这个参数的单位也是KB,默认为80,这个值不应该超过maxRequestLength参数。
maxRequestLength元素虽然可以⾃定义设置,但是最⼤也不能超过2097151KB(最⼤不能⼤于2G),可以看到还设置了executionTimeout元素, executionTimeout元素表⽰请求允许被执⾏的秒数,默认为110秒(.Net Framework1.1 时默认为:90秒); 当上传⽂件越⼤,执⾏请求的时间也就越长,所以根据设置的maxRequestLengtht适当的调整executionTimeout元素的值(单位为:秒)。
当请求的内容长度超过门槛的限值之后,请求的内容将会被保存到⽂件中,这个⽂件的位置由compilation配置元素的tempDirectory属性指定。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using DevExpress.Web.ASPxUploadControl;using System.IO;using Microsoft.Office.Interop.Word;using MS.Internal.Xml;using Word = Microsoft.Office.Interop.Word;publicpartialclass Contributor_Author_Upload : System.Web.UI.Page{protectedvoid Page_Load(object sender, EventArgs e){}//protected void btnUpload_Click(object sender, EventArgs e)//{// string id = Session["稿?件tID"].ToString();// Session["稿?件tID"].ToString();// string zzlb = Request.QueryString["zzlb"];// string ny = Request.QueryString["ny"];// string bc = Request.QueryString["bc"];// string gjbt = Request.QueryString["gjbt"];// decimal filesize = FileUpload_upload.PostedFile.ContentLength / 1024;// string filetype = FileUpload_upload.PostedFile.ContentType;// if (this.FileUpload_upload.PostedFile.FileName == "")// {// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "请?选?择?文?件t!"));// return;// }// if(this.FileUpload_upload.FileName.Substring(this.FileUpload_upload.FileName.Length-4,4).ToL ower()!= ".doc")// {// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "请?上¦?传ä?Doc文?件t!"));// return;// }// if (filesize / 1024 > 1)//限T制?为a1M// {// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "文?件t不?能¨¹超?过y2M"));// return;// }// try// {// string ClientPath = FileUpload_upload.PostedFile.FileName;//客¨ª户¡ë端?文?件t路¡¤径?// FileInfo ClientPathFile = new FileInfo(ClientPath);// string ServerPath = "C:\\" + zzlb + "\\" + ny + "\\" + bc ;//Server.MapPath("../Document/稿?件tword/" + id + "_" + );//服¤t务?端?文?件t路¡¤径?// string FileName = FileUpload_upload.FileName;// //判D断?是º?否¤?存ä?在¨²文?件t夹D,ê?不?存ä?在¨²则¨©创ä¡ä建¡§// DirectoryInfo file = new DirectoryInfo(ServerPath);// if (!file.Exists)// {// file.Create();// }// ServerPath = ServerPath + "\\" + id + "_" + gjbt+".doc";// //if (System.IO.File.Exists(ServerPath))//判D断?服¤t务?器¡Â上¦?是º?否¤?有®D同ª?名?文?件t存ä?在¨²,ê?若¨?自Á?己o定¡§义©?名?称?可¨¦上¦?传ä?// //{// // ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "重?复¡ä文?件t名?称?!"));// // return;// //}// this.FileUpload_upload.SaveAs(ServerPath);//保À¡ê存ä?文?件t// DataSet_GJXXTableAdapters.TA_MANUSCRIPTTableAdapter ta = newDataSet_GJXXTableAdapters.TA_MANUSCRIPTTableAdapter();// ta.UpdateQuery_原-稿?文?件t(ServerPath, getWordsNumber(ServerPath), id);// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "上¦?传ä?成¨¦功|!ê?"));// }// catch (Exception)// {// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "发¤¡é生¦¨²异©¨¬常¡ê,ê?请?重?新?上¦?传ä?!"));// }//}/*** 2013/11/22* 徐¨¬昌y*/protectedvoid ASPxUploadControl1_FileUploadComplete(object sender, FileUploadCompleteEventArgs e){string id = Session["稿?件tID"].ToString();// Session["稿?件tID"].ToString();string zzlb = Request.QueryString["zzlb"];string ny = Request.QueryString["ny"];string bc = Request.QueryString["bc"];string gjbt = Request.QueryString["gjbt"];string name=Request.QueryString["name"].ToString();//if (this.ASPxUploadControl1.PostedFile.FileName == "")//{// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "请?选?择?文?件t!"));// return;//}//if (this.ASPxUploadControl1.FileName.Substring(this.FileUpload_upload.FileName.Length - 4, 4).ToLower() != ".doc")//{// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "请?上¦?传ä?Doc文?件t!"));// return;//}try{// string ClientPath = FileUpload_upload.PostedFile.FileName;//客¨ª户¡ë端?文?件t路¡¤径?//FileInfo ClientPathFile = new FileInfo(ClientPath);string Path = "C:\\"+ zzlb + "\\"+ ny + "\\"+ bc; //Server.MapPath("../Document/稿?件tword/" + id + "_" + );//服¤t务?端?文?件t路¡¤径?// string FileName = FileUpload_upload.FileName;//判D断?是º?否¤?存ä?在¨²文?件t夹D,ê?不?存ä?在¨²则¨©创ä¡ä建¡§DirectoryInfo file = new DirectoryInfo(Path);if (!file.Exists){file.Create();}string ServerPath = Path + "\\" + id + "_" + gjbt+".doc";string filepath = id + "_" + gjbt + ".doc";//if (Directory.Exists(Path))//{// foreach (string d in Directory.GetFileSystemEntries(Path))// {// if (d.Equals(filepath))// {// file.Delete(true);// }// }//}//if (System.IO.File.Exists(ServerPath))//判D断?服¤t务?器¡Â上¦?是º?否¤?有®D同ª?名?文?件t 存ä?在¨²,ê?若¨?自Á?己o定¡§义©?名?称?可¨¦上¦?传ä?//{// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "重?复¡ä文?件t名?称?!"));// file.Delete();//}// string filename = ServerPath + e.UploadedFile.FileName;this.ASPxUploadControl1.SaveAs(ServerPath);//this.FileUpload_upload.SaveAs(ServerPath);//保À¡ê存ä?文?件t//System.DateTime currentTime=new System.DateTime();//string strMD=currentTime.ToString("m");DataSet_GJXXTableAdapters.TA_MANUSCRIPTTableAdapter ta = newDataSet_GJXXTableAdapters.TA_MANUSCRIPTTableAdapter();ta.UpdateQuery_原-稿?文?件t(ServerPath, getWordsNumber(ServerPath), name, DateTime.Now.Date, id);//ta.UpdateQuery_原-稿?文?件t(ServerPath, getWordsNumber(ServerPath), id);// ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "上¦?传ä?成¨¦功|!ê?"));// Response.Write(string.Format(" <script>alert('提¬¨¢交?成¨¦功|!ê?');window.location='{0}';</script>", para));// ScriptManager.RegisterStartupScript(this,this.GetType(), "", "<script>alert('上¦?传ä?成¨¦功|!ê?')</script>", true);// Response.Write("<script>alert('上¦?传ä?成¨¦功|!ê?')</script>");e.CallbackData = "success";}catch (Exception ex){//ClientScript.RegisterStartupScript(this.GetType(), "alert",String.Format("<script>alert('{0}');</script>", "发¤¡é生¦¨²异©¨¬常¡ê,ê?请?重?新?上¦?传ä?!"));e.ErrorText = ex.Message;e.CallbackData = "error";}}protectedint getWordsNumber(string path){Microsoft.Office.Interop.Word.ApplicationClass ThisApplication = new Microsoft.Office.Interop.Word.ApplicationClass();object missingValue = Type.Missing;object myTrue = true;object filename = path;Microsoft.Office.Interop.Word.Document ThisDocument =ThisApplication.Documents.Open(ref filename, ref missingValue,ref myTrue, ref missingValue, ref missingValue, ref missingValue,ref missingValue, ref missingValue, ref missingValue,ref missingValue, ref missingValue, ref missingValue,ref missingValue, ref missingValue, ref missingValue,ref missingValue);//Microsoft.Office.Interop.Word.Document ThisApplication = newMicrosoft.Office.Interop.Word.Document();Microsoft.Office.Interop.Word.Range docRanger = ThisDocument.Content;//字Á?数ºyint WordsCount = puteStatistics(Word.WdStatistic.wdStatisticWords); //关?闭À?对?象¨®ThisDocument.Close(ref missingValue, ref missingValue, ref missingValue);return WordsCount;}}。