ajaxFileUpload上传弹出下载框
jquery fileupload控件的用法
jquery fileupload控件的用法`jQuery File Upload`是一个基于`jQuery`的文件上传插件,用于实现文件的异步上传功能。
其用法如下:1. 需要加载的`js`文件:`jquey-1.8.3.min.js`、`jquery-ui-widget.js`、`jquery.iframe-transport.js`、`jquery.fileupload.js`。
2. `html`代码:```html<input id="fileupload" type="file" name="files()" data-url="server/php/" multiple>```3. `js`代码:```javascript$(function () {$("#fileupload").fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$("<p/>").text().appendTo(document.body);})},progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$("#progress .bar").css("width", progress + "%");},// 需要一个<div>容器用来显示进度<div id="progress"><div class="bar" style="width: 0%;"></div>});})```4. `API`:- `Initialization`:在上传按钮上调用`fileupload()`方法。
jquery插件ajaxupload实现文件上传操作
jquery插件ajaxupload实现⽂件上传操作本⽂实例讲述了jquery插件ajaxupload实现⽂件上传操作代码。
分享给⼤家供⼤家参考。
具体如下:运⾏效果截图如下:图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 {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";}//判断⽂件⼤⼩}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;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* @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) {/*** 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;// DOM elementthis._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';});div.appendChild(input);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 responsevar toDeleteFlag = false,self = 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 FF3removeNode(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();}};})();更多精彩内容请参考专题,和进⾏学习。
文件上传、下载uniapp——uploadFile、downloadFile
⽂件上传、下载uniapp——uploadFile、downloadFileuni.app中中的上传、下载接⼝,分包为和。
uni.uploadFile(OBJECT)定义将本地资源上传到开发者服务器,客户端发起⼀个POST请求,其中content-type为multipart/form-data。
如页⾯通过等接⼝获取到⼀个本地资源的临时⽂件路径后,可通过此接⼝将本地资源上传到指定服务器。
另外选择和上传⾮图像、视频⽂件参考:。
在各个⼩程序平台运⾏时,⽹络相关的 API 在使⽤前需要配置域名⽩名单。
推荐开发者上传到uniCloud,uniCloud提供了免费CDN和更好的易⽤性,包括安全的cdn直传。
uniCloud的上传API:;封装的更完善的,⽂件选择、上传到uniCloud,⼀站式集成。
参数url String是开发者服务器urlfiles Array是(files和filePath选其⼀)需要上传的⽂件列表。
使⽤ files 时,filePath 和 name 不⽣效。
App、H5( 2.6.15+)fileType String见平台差异说明⽂件类型,image/video/audio仅⽀付宝⼩程序,且必填。
file File否要上传的⽂件对象。
仅H5(2.6.15+)⽀持filePath String是(files和filePath选其⼀)要上传⽂件资源的路径。
name String是⽂件对应的 key , 开发者在服务器端通过这个 key 可以获取到⽂件⼆进制内容header Object否HTTP 请求 Header, header 中不能设置 Referer。
timeout Number否超时时间,单位 ms H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)formData Object否HTTP 请求中其他额外的 form datasuccess Function否接⼝调⽤成功的回调函数fail Function否接⼝调⽤失败的回调函数complete Function否接⼝调⽤结束的回调函数(调⽤成功、失败都会执⾏)注:App⽀持多⽂件上传,微信⼩程序只⽀持单⽂件上传,传多个⽂件需要反复调⽤本API。
ajax上传文件,并检查文件类型、检查文件大小
ajax上传⽂件,并检查⽂件类型、检查⽂件⼤⼩1、使⽤ajaxfileupload.js的插件,但是对插件做了⼀处修改,才能够正常使⽤ 修改的部分如下:1 2 uploadHttpData: function (r, type) {3 var data = !type;4 data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context5 if (type == "script")6 jQuery.globalEval(data); // Get the JavaScript object, if JSON is used.7 if (type == "json"){//对json类型的返回结果,做截取处理8 var tempData = data.substring(data.indexOf(">\"") + 2);9 data = tempData.replace("\"</pre>", "");10 }11 if (type == "html")12 jQuery("<div>").html(data).evalScripts();13 return data;14 }2、检查⽂件⼤⼩,对于常⽤浏览器测试都是可以的...3、使⽤struts的action接收,两个参数:1)上传到⽂件imageFile;2)上传的本地⽂件路径imageFilePath4、ajaxfileupload.js源码在最后贴出来1<!DOCTYPE html>2<html>3<head>4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>5<script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>6<script src="ajaxfileupload.js"></script>7<script type="text/javascript">89/* 头像上传 */10function ajaxfileupload() {11var filepath = $("#imageFile").val();12//检查是否为图⽚13if(!isImage(filepath)){14return false;15 }16//检查⽂件⼤⼩,不能超过2M17if(!checkFileSize(filepath)){18return false;19 }2021 $.ajaxFileUpload({22 url: 'stu/uploadimage',23 secureuri: false, //⼀般设置为false24 type: 'post',25 data: {imageFileName: $("#imageFile").val()},26 dataType: 'json',27 fileElementId: "imageFile",28 success: function (data, status) {29if (data == "error") {30 alert("上传失败,请重试");31 } else {32//导航栏:头像33 $("#header_student_image").attr("src", data);34 alert("上传成功");35 }36 },37 error: function (data, status, e)//服务器响应失败处理函数38 {39 alert("上传失败,请重试");40 }41 }42 );43return false;44 };4546/* 检查是否为图⽚ */47function isImage(filepath) {48var extStart = stIndexOf(".");49var ext = filepath.substring(extStart, filepath.length).toUpperCase();50if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {51 alert("头像只能是bmp,png,gif,jpeg,jpg格式喔");52return false;53 }54return true;55 }5657/* 检查图⽚⼤⼩,不能超过3M,⽀持IE、filefox、chrome */58function checkFileSize(filepath) {59var maxsize = 2 * 1024 * 1024;//2M60var errMsg = "上传的头像⽂件不能超过2M喔";61var tipMsg = "您的浏览器暂不⽀持上传头像,确保上传⽂件不要超过2M,建议使⽤IE、FireFox、Chrome浏览器。
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方法:。
如何给fileupload赋值
如何给fileupload赋值在JavaScript中,有多种方法可以给fileupload元素赋值。
fileupload 是一个HTML input元素,用于选择文件上传。
通过给fileupload元素赋值,可以实现自动选择文件的效果,方便用户操作。
本文将介绍三种常用的方法来给fileupload赋值。
方法一:使用input元素的value属性可以通过直接设置fileupload元素的value属性来给它赋值。
代码如下:```javascriptvar fileupload = document.getElementById("fileupload"); // 获取fileupload元素fileupload.value = "your_file_path";```在代码中,首先通过getElementById方法获取到fileupload元素,然后将其value属性设置为文件路径。
这样就可以将指定的文件路径赋值给fileupload元素。
需要注意的是,由于安全原因,浏览器不允许通过JavaScript来修改fileupload元素的实际值。
所以,尽管通过设置value属性可以改变显示在fileupload元素旁边的文本框中的内容,但是实际上并没有改变文件的选择。
方法二:使用files对象fileupload元素中的files对象包含了用户选择的文件列表。
可以通过这个对象来给fileupload元素赋值。
代码如下:```javascriptvar fileupload = document.getElementById("fileupload"); // 获取fileupload元素var file = new File(["your_file_contents"], "your_file_name"); // 创建一个新文件对象fileupload.files = [file]; // 给fileupload元素赋值```在代码中,首先创建一个新文件对象,用于模拟用户选择的文件。
$.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控件的用法-回复【fileupload控件的用法】是一个用于网页文件上传功能的控件,是开发人员经常使用的工具之一。
本文将一步一步回答有关fileupload控件的用法和使用指南。
第一步:了解fileupload控件的基本概念和作用fileupload控件是一种HTML元素,用于在网页上创建一个可供用户选择文件并上传的控件。
它允许用户通过浏览自己的计算机文件系统,从中选择一个或多个要上传的文件。
主要作用是方便用户将文件传输到服务器上,供网站后台进行处理和存储。
第二步:创建fileupload控件并添加到网页中在HTML代码中,使用<input type="file">标签创建一个fileupload控件,如下所示:<input type="file" name="uploadFile" id="uploadFile">其中,name属性用于指定控件的名称,id属性用于给控件指定一个唯一的标识符,供后续的JavaScript操作使用。
第三步:为fileupload控件添加事件处理程序通过JavaScript代码,可以为fileupload控件添加事件处理程序,以便在用户选择文件后执行相应的操作。
例如,可以为控件的onchange事件添加一个函数,当用户选择文件后自动触发该函数。
示例如下:document.getElementById("uploadFile").onchange = function() { 上传文件的操作}第四步:处理用户上传的文件在事件处理程序中,可以通过fileupload控件的value属性获取用户选择的文件路径。
如下所示:var filePath = document.getElementById("uploadFile").value;但需要注意的是,出于安全考虑,浏览器不允许JavaScript访问用户计算机的文件系统。
使用Promise封装ajax上传文件
使用Promise封装ajax上传文件在使用Promise封装ajax上传文件前,我们首先要了解一下Promise的概念和使用方法。
Promise是JavaScript中的一个异步处理的对象,它可以代表一个异步操作的最终完成或失败,并返回结果或错误。
Promise有三种状态:pending(等待态)、fulfilled(成功态)和rejected(失败态)。
1. 创建一个Promise对象:```javascriptfunction uploadFile(file)return new Promise(function(resolve, reject)// 在这里进行ajax上传文件的操作});```2. 使用XMLHttpRequest对象进行文件上传:```javascriptfunction uploadFile(file)return new Promise(function(resolve, reject)var xhr = new XMLHttpRequest(;xhr.open('POST', 'upload.php', true);xhr.onload = functioif (xhr.status === 200)resolve(xhr.responseText);} elsereject(xhr.statusText);}};xhr.onerror = functioreject(xhr.statusText);};xhr.send(file);});```在上述代码中,我们创建了一个XMLHttpRequest对象,并在其`open`方法中指定了上传文件的URL和请求方式。
然后定义了`onload`事件处理函数,在文件上传完成时检查返回的状态码。
如果状态码为200,则表示上传成功,调用resolve方法返回上传的响应文本;否则,调用reject方法返回错误信息。
Ajax请求做文件上传后端使用MultipartFile接收
Ajax请求做文件上传后端使用MultipartFile接收在进行文件上传时,我们通常使用Ajax请求来实现异步上传。
而在后端,可以使用Spring MVC提供的MultipartFile来接收文件。
首先,前端需要使用FormData对象来构建文件上传的表单数据。
FormData对象是一种用于构建表单数据的API,它允许我们通过Ajax以异步方式发送表单数据,包括文件。
```javascript//HTML部分<form id="uploadForm"><input type="file" name="file" id="fileInput"><button type="submit" id="submitButton">上传</button></form><script>// JavaScript部分$("#uploadForm").submit(function(event)event.preventDefault(; // 阻止默认的表单提交行为var formData = new FormData(;formData.append("file", $("#fileInput")[0].files[0]);$.ajaxurl: "/upload",type: "POST",data: formData,processData: false, // 不对表单数据进行处理contentType: false, // 不设置Content-Type请求头success: function(response)//文件上传成功},error: functio//文件上传失败}});});</script>```在上述代码中,我们通过`FormData.append(`方法将文件对象添加到FormData中。
AjaxSubmit+Servlet表单文件上传和下载
AjaxSubmit+Servlet表单⽂件上传和下载⼀、背景前段时间公司要求我做⼀个上传和下载固件的页⾯,以备硬件产品在线升级,现在我把这部分功能抽取出来作为⼀个Demo Project给⼤家分享。
话不多说,先看项⽬演⽰ -->⼆、源码前端js库:jquery-3.2.1.min.js,jquery.form.js(异步表单提交),jsviews.min.js(模板渲染)jsviews科普:jsviews是实现MVVM的js库,分为JsRender(渲染),JsViews(数据视图双向绑定),JsObservable (数据监听),有兴趣的同学可以去了解,这⾥只⽤到了渲染的功能。
1、下载页⾯ index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajaxSubmit上传</title><link rel="shortcut icon" href="images/favicon.ico"><link rel="Bookmark" href="images/favicon.ico"><link rel="stylesheet" href="css/index.css"/><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/jquery.form.js"></script><script type="text/javascript" src="js/jsviews.min.js"></script><script type="text/javascript" src="js/common.js"></script></head><body><h1>上传下载Demo</h1><h2>1、上传⽂件</h2><form id="addForm"><div><span>选择类型:</span><select name="code" id="code"><option value="0">普通开关</option><option value="1">插座</option></select></div><div><span>选择⽂件(⼩于5k):</span><input type="file" id="file" name="file"></div><div><button type="button" id="addConfirm" name="addConfirm">确定</button></div></form><h2>2、测试上传结果</h2><table id="tbBody"><thead><tr><td>类型</td><td>⽂件名</td><td>通过Servlet下载</td></tr></thead></table></body><script type="text/javascript" src="js/index.js"></script><!-- jsviews模板 --><script id="listTmpl" type="text/x-jsrender"><tr><td>{^{if code=='0'}}普通开关{{else code=='1'}}插座{{else}}数据错误{{/if}}</td><td>{{:fileName}}</td><td><a href="fileDownload?fileName={{:fileName}}">urlServlet</a></td></tr></script></html>2、公共js js/common.js//获取链接参数function getQueryString(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r!=null)return unescape(r[2]); return null;}3、 js/index.js//提交表单function addSubmit(){var options={ url: "fileUpload",type:'post',datatype:'json', success: function (data) {var result = JSON.parse(data);if(result.code == "0000"){var pageBarTmpl = $.templates("#listTmpl");var html = pageBarTmpl.render(result.content);$("#tbBody").append(html);}else{alert(result.desc);} }}$("#addForm").ajaxSubmit(options);}//提交前检查function submitCheck(){var code = $("#code").val();if (!code) {alert("请选择类型");return false;}var file = $("#file").val();if (!file) {alert("请选择需要上传的固件");return false;}}//按钮触发$("#addConfirm").click(function(){if(submitCheck())addSubmit();});4、css/index.csstable th,table td{border:1px solid black;}form div{margin:5px;}后端使⽤到了commons-fileupload-1.3.1.jar,commons-io-2.4.jar以及gson-2.6.2.jar1、返回结果类 RspResult.java/*** 返回结果类* @author zhang**/public class RspResult{private String code; //返回码private String desc; //返回描述private Map<String,Object> content; //返回内容public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}public Map<String, Object> getContent() {return content;}public void setContent(Map<String, Object> content) {this.content = content;}}2、⾃定义异常类 MyException.java/*** ⾃定义异常* @author zhang**/public class MyException extends Exception{private static final long serialVersionUID = 3075956744530570774L;private String code; //错误码private String desc; //描述public MyException(String code, String desc) {super();this.code = code;this.desc = desc;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getDesc() {return desc;}public void setDesc(String desc) {this.desc = desc;}}3、⽂件上传Servlet FileUpload.java/*** ⽂件上传类* 使⽤commons-fileupload⼯具包解析表单内容,捕获⾃定义异常* @author zhang**/public class FileUpload extends HttpServlet{private static final long serialVersionUID = -4700695646596658600L;private static final String SAVE_LOCATION = "/home/www/download/blog/ajaxUpload/"; //保存地址 @Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException { resp.setCharacterEncoding("UTF-8");RspResult result = new RspResult();result.setCode("0000");result.setDesc("success");try {DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);upload.setFileSizeMax( 5*1024 ); //单个⽂件最⼤上传⼤⼩为5kupload.setSizeMax( 5*1024 ); //设置全部⽂件最⼤上传总⼤⼩为5kupload.setHeaderEncoding("utf-8"); //设置编码List<FileItem> fileItems = upload.parseRequest(req);Iterator<FileItem> iterator = fileItems.iterator();Map<String, Object> rspConent = new HashMap<>();DiskFileItem fileItem = null;//循环读取表单数据while (iterator.hasNext()) {FileItem item = iterator.next();if (!item.isFormField()) { //是否为⽂件类型,因为只有⼀个⽂件,所以单个引⽤就⾏fileItem = (DiskFileItem) item;rspConent.put(item.getFieldName(), item.getString());}}if(fileItem == null)throw new MyException("0001","⽆选择⽂件");String fileName = fileItem.getName();fileItem.write(new File(SAVE_LOCATION + fileName));rspConent.put("fileName", fileName);result.setContent(rspConent);} catch (FileUploadException e ) {result.setCode("0001");result.setDesc("⽂件上传⼤⼩为5k");e.printStackTrace();} catch (MyException e ) { //取得⾃定义异常结果result.setCode(e.getCode());result.setDesc(e.getDesc());} catch (Exception e) {result.setCode("0001");result.setDesc("未知错误");e.printStackTrace();}finally {PrintWriter out = null;try {out = resp.getWriter();} catch (IOException e) {e.printStackTrace();}out.write(new Gson().toJson(result));}}}4、⽂件下载Servlet FileDownload.java/*** ⽂件下载类,读取⽂件,以字节流形式写到response* @author admin**/public class FileDownload extends HttpServlet{private static final long serialVersionUID = -9135576688701595777L;private final String SAVE_LOCATION = "/home/www/download/blog/ajaxUpload/";@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException {InputStream in = null;try {String fileName = req.getParameter("fileName");in = new FileInputStream(SAVE_LOCATION+fileName);// 设置输出格式resp.setCharacterEncoding("utf-8");resp.addHeader("Content-Disposition", "attachment; filename=\"" + URLEncoder.encode(fileName, "UTF-8") + "\"");// 读取数据byte[] b = new byte[100];int len = 0;while ((len = in.read(b)) > 0)resp.getOutputStream().write(b, 0, len);} catch (UnsupportedEncodingException e2) {e2.printStackTrace();} catch (FileNotFoundException e1) {e1.printStackTrace();} catch (IOException e) {e.printStackTrace();}finally {try {if(in != null)in.close();} catch (IOException e) {e.printStackTrace();}}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}}配置1、项⽬配置 web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="/2001/XMLSchema-instance" xmlns="/xml/ns/javaee" xmlns:jsp="/xml/ns/javaee/jsp" xmlns:web="/xml/ns/javaee/web-app_2_5.xsd" <display-name>upload-download-demo</display-name><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list><servlet><servlet-name>fileUpload</servlet-name><servlet-class>com.yuejia.servlet.FileUpload</servlet-class></servlet><servlet-mapping><servlet-name>fileUpload</servlet-name><url-pattern>/fileUpload</url-pattern></servlet-mapping><servlet><servlet-name>fileDownload</servlet-name><servlet-class>com.yuejia.servlet.FileDownload</servlet-class></servlet><servlet-mapping><servlet-name>fileDownload</servlet-name><url-pattern>/fileDownload</url-pattern></servlet-mapping></web-app>2、tomcat配置url⽀持utf-8 server.xml<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8"/>三、总结本Demo适合⼀次性上传⼩⽂件,多数情况下需要先上传⽂件再进⾏表单提交,视需求⽽定。
使用ajaxfileupload.js实现ajax上传文件php版
使⽤ajaxfileupload.js实现ajax上传⽂件php版⽆论是PHP,还是其他的服务端脚本都提供了⽂件上传功能,实现起来也⽐较简单。
⽽利⽤JavaScript来配合,即可实现Ajax⽅式的⽂件上传。
虽然jQuery本⾝没有提供这样的简化函数,但有不少插件可以实现。
其中,提供的ajaxfileupload.js是⼀个轻量的插件,⽽且编写⽅式与jQuery提供的全局⽅法$.post()⾮常相似,简单易⽤。
不过,该插件实在太简化了,除了可提供需上传⽂件的路径外,也就不能传递额外的值到后台服务端。
所以,我修改了⼀下该脚本,增加个⼀个data对象参数。
⼀、原理我这⾥使⽤的是PHP作为服务端脚本,⼏乎在每本较少PHP的书上都会提到如何使⽤move_uploaded_file()⽅法来上传⽂件,这⾥我就不再细说了。
我想说的是,利⽤Ajax上传的原理。
因为⼀直在使⽤jQuery库,所以当想到Ajax时,第⼀反应就是试试$.post()⽅法,利⽤各选择器得到file⽂件框中的value值,然后提交到后台服务端。
当然,后来证明这是不⾏的。
(正因为这问题,我还查了不少资料,⽹上还提供了不少ASP等⽅式的脚本,真不知道该说什么好。
)回到正题,要实现Ajax⽅式上传,其实并不难,⽅法也有不少。
⽽本⽂提到的的ajaxfileupload.js插件就是使⽤iframe的⽅式。
这也是在不使⽤JavaScript脚本时,要实现不刷新页⾯上传时常见的⽅法。
(本博客bo-blog后台撰写⽇志就是⽤该⽅法)⽽ajaxfileupload.js插件也很简单,就是先利⽤jQuery的选择器获得file⽂件上传框中的⽂件路径值,然后动态的创建⼀个iframe,并在⾥⾯建⽴⼀个新的file ⽂件框,提供post⽅式提交到后台。
最后,返回结果到前台。
⼆、使⽤ajaxfileupload.js插件的使⽤很简单。
前台HTML代码类似:<script type="text/javascript">$(#buttonUplod).click(function () {$.ajaxFileUpload ({url:'doajaxfileupload.php', //你处理上传⽂件的服务端secureuri:false, //与页⾯处理代码中file相对应的ID值fileElementId:'img',dataType: 'json', //返回数据类型:text,xml,json,html,scritp,jsonp五种success: function (data) {alert(data.file_infor);}})});</script><input id="img" type="file" size="45" name="img" ><button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>后台doajaxfileupload.php脚本:<?php$upFilePath = "../attachment/";$ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);if($ok === FALSE){echo json_encode('file_infor'=>'上传失败');}else{echo json_encode('file_infor'=>'上传成功');}>为了测试,可以使⽤类似下⾯的⽅式保存传递过来的变量值:$file_info = var_export($_FILES,true);$ok = file_put_contents("../attachment/file_info.txt",$file_info);if ($ok) exit(json_encode('file_infor'=>'上传成功'));exit (json_encode('file_infor'=>'上传失败'));※注意请留意HTML代码⽂件框中的标记:1. id='img'是⽤于给ajaxfileupload.js插件的fileElementId:'img'识别的,jQuery选择器会利⽤该字符串获得⽂本框的值;2. name='img'是⽤于通过post⽅式提交到后台脚本时,PHP通过$_FILES['img']读取上传⽂件的数据,若没有该值,$_FILES 变量为空;所以,这两个值缺⼀不可,也不可混淆。
ajaxfileupload error处理
ajaxfileupload error处理Ajax 文件上传(Ajax File Upload)是一种常用的Web 开发技术,能够实现在不刷新整个页面的情况下上传文件。
然而,由于网络环境和用户操作的不可预测性,我们经常会遇到一些错误情况。
在本篇文章中,我们将详细讨论Ajax 文件上传的错误处理,以中括号为主题,为您一步一步解答。
第一步:了解Ajax 文件上传的错误类型在处理Ajax 文件上传错误之前,我们首先需要了解可能遇到的错误类型。
在Ajax 文件上传过程中,以下是一些常见的错误情况:1. 网络错误:由于网络波动或断连等原因,上传文件请求无法成功发送到服务器或从服务器获取响应。
2. 文件类型错误:当用户上传了不被服务器接受的文件类型时,需要给出明确的错误提示信息。
3. 文件大小错误:当用户上传的文件过大,超过了服务器设定的限制时,也需要给出相应提示。
4. 后端处理错误:服务器在接收到上传文件后,可能由于程序逻辑错误或服务器配置问题,无法正确处理文件,并返回错误信息。
第二步:网络错误处理网络错误是不可避免的问题,但我们可以通过合理的错误处理机制提供更好的用户体验。
一种常用的处理方式是,使用JavaScript 中的error 事件来监听网络错误,然后显示相应的错误信息,如提示用户检查网络连接、刷新页面、或重新上传文件。
第三步:文件类型错误处理在进行Ajax 文件上传时,我们通常会限制用户只能上传特定类型的文件。
如果用户上传了不被服务器接受的文件类型,我们需要给予明确的错误提示。
一种常见做法是,在前端使用JavaScript 进行文件类型检查,并提供实时的错误提示信息。
例如,我们可以监听文件选择事件,获取上传文件的扩展名,并与服务器接受的文件类型进行对比。
如果不匹配,我们可以使用JavaScript 的alert 函数弹出提示框,告知用户上传文件类型不被接受。
第四步:文件大小错误处理与文件类型错误类似,文件大小错误也需要进行相应的处理。
使用ajax提交form表单,包括ajax文件上传
使⽤ajax提交form表单,包括ajax⽂件上传前⾔使⽤ajax请求数据,很多⼈都会,⽐如说:$.post(path,{data:data},function(data){...},"json");⼜或者是这样的ajax$.ajax({url:"${pageContext.request.contextPath}/public/testupload",type:"post",data:{username:username},success:function(data){window.clearInterval(timer);console.log("over..");},error:function(e){alert("错误!!");window.clearInterval(timer);}});同样的,很多⼈也会。
但是写的越多就越会发现,这样⼦虽然可以避免刷新页⾯,但是我们要写⼤量的js来到得数据:var username = $("#username").val();var password = $("#password").val();...如果数量少的话,那还没有什么,但是如果数据⼗分⼤的话,那就⼗分的⿇烦,那有没有什么简单的⽅法呢?答案肯定有的!下⾯介绍两种⽅法,可以极⼤的提⾼开发⼈员的效率。
⽅法⽅法⼀:使⽤FormData对象FormData对象是html5的⼀个对象,⽬前的⼀些主流的浏览器都已经兼容。
额,如果你说ie8什么的,那我们还是来谈谈今天的天⽓吧,我没听见。
呵呵,开个玩笑,不⽀持FormData的,可以使⽤⽅法⼆,下⾯会介绍。
接着说FormData,它是⼀个html5的javascript对象,⾮常的强⼤。
FormData可以凭空创建⼀个对象,然后往这个对象⾥⾯添加数据,然后直接提交,不需要写⼀⾏html代码,如下:var form = new FormData();form.append("username","zxj");form.append("password",123456);var req = new XMLHttpRequest();req.open("post", "${pageContext.request.contextPath}/public/testupload", false);req.send(form);这样就可以向浏览器发送表单数据了,或者也可以使⽤Jquery这样发送:var form = new FormData();form.append("username","zxj");form.append("password",123456); $.ajax({url:"${pageContext.request.contextPath}/public/testupload",type:"post",data:form,processData:false,contentType:false,success:function(data){window.clearInterval(timer);console.log("over..");}});这样也可以直接发送数据到后台。
fileupload js控件的用法
文章标题:深度探讨fileupload js控件的用法1. 文件上传控件的意义和重要性文件上传是 Web 开发中非常常见的功能之一,它可以让用户将本地文件上传到服务器上,并在网页上进行展示和操作。
在现代 Web 开发中,利用 JavaScript 编写的文件上传控件扮演着重要的角色,能够提供更加丰富和用户友好的上传体验。
fileupload js 控件作为其中一种常见的文件上传控件,具有着许多便捷的特性和功能,下面我们将进行深入探讨。
2. fileupload js控件的基本用法使用 fileupload js 控件,首先要引入相应的 JavaScript 文件,并在页面中创建文件上传的相关 HTML 元素。
通过简单的配置,我们可以实现文件的上传、预览和删除等操作。
我们可以使用 fileupload 控件将用户所选择的文件上传到服务器,并在上传完成后显示上传成功的信息。
我们还可以对上传的文件进行预览,包括缩略图、文件名和大小等信息。
另外,我们还可以在文件上传完成后,对已上传的文件进行删除或编辑操作。
3. fileupload js控件的高级用法除了基本的文件上传操作,fileupload js 控件还支持许多高级的功能,比如对上传文件的格式和大小进行限制,对上传文件进行实时的进度条展示,以及支持多文件上传等。
通过适当的配置和参数设置,我们可以很容易地实现这些高级功能,从而提升用户的文件上传体验。
fileupload js 控件还提供了丰富的事件和回调函数,可以让我们在不同阶段进行自定义的处理。
4. 个人观点和经验共享作为一个经验丰富的前端工程师,我对于 fileupload js 控件的使用有着自己独特的见解。
在实际项目中,我发现通过合理地利用fileupload js 控件的各种功能,可以大大提高文件上传操作的便捷性和用户友好性,同时也能在一定程度上减少后端开发的工作量。
通过对文件上传控件的合理配置和定制,我们能够更好地满足不同项目的需求,提供更加灵活和强大的文件上传解决方案。
前端开发中的文件上传和下载实现方法
前端开发中的文件上传和下载实现方法在现代互联网时代,文件的上传和下载是我们经常要面对的需求。
特别是在前端开发中,如何实现文件上传和下载功能是一个相当重要的课题。
本文将介绍一些前端开发中常用的文件上传和下载的实现方法。
一、文件上传的实现方法1. 表单提交方式最传统的文件上传方法就是利用表单提交。
我们可以通过创建一个包含文件输入框的表单,然后用户选择文件后,点击提交按钮将文件上传到服务器。
在HTML中,可以使用input元素的type属性为file来创建文件输入框,然后将表单的enctype属性设置为multipart/form-data,这样可以保证文件能够正确上传到服务器。
在服务端,可以使用各种后端技术来处理上传文件,如Java的Servlet、PHP、Node.js等。
2. AJAX方式使用AJAX方式实现文件上传可以实现无刷新上传,提升用户体验。
传统的表单提交会导致页面的刷新,而使用AJAX可以在不刷新页面的情况下异步上传文件。
在实现上,可以使用FormData对象来传输文件数据,并通过XMLHttpRequest 对象发送请求。
同时,通过监听上传进度事件,可以实时显示文件上传的进度。
3. 第三方库除了自己实现文件上传逻辑外,也可以使用第三方库来简化文件上传的过程。
一些流行的前端框架和库,如jQuery、React等都提供了丰富的插件或组件来方便实现文件上传功能。
这些插件和组件一般都有了良好的兼容性和一套完整的API,可以大大简化文件上传的开发流程。
二、文件下载的实现方法1. 普通链接下载最简单的文件下载方式就是提供一个普通链接,让用户点击链接后即可下载文件。
在HTML中,可以使用a标签的href属性指向文件的URL,然后点击该链接即可完成文件下载。
不过需要注意的是,在特定情况下,如需要下载大文件时,直接使用普通链接下载可能会导致浏览器崩溃或内存耗尽的问题。
2. Blob对象下载为了解决上述问题,可以使用Blob对象来进行文件下载。
axios、fetch、ajax请求下载文件时的进度条-下载进度-上传进度-请求进度
axios、fetch、ajax请求下载⽂件时的进度条-下载进度-上传进度-请求进度原⽂教程:axios的实现:ajax的实现:fetch 的实现:备注1、我的场景是请求 csv ⽂件,我希望获取下载进度。
下⾯是各种实现的代码。
2、如果是上传进度可能不太⼀样。
有必要的话将来回来补充。
3、如果是请求正常接⼝的话,似乎⽆法获得进度,是⼀步到位的。
也就是: { loaded: 【⽂件总⼤⼩】,total: 0 }。
所以⽆法⽤于请求普通接⼝。
axios 请求下载⽂件时的进度条事件;(async () => {// 启动计时器console.time(' 耗时统计:')// your code...await axios({url: './全量数据-20220309144842.csv',method: 'get',onDownloadProgress(progress) {const step = Math.round(progress.loaded / progress.total * 100)console.log(step + '%')}}).then(res => {console.log('正在解析...')const data = csvJSON(res.data)console.log('解析完成', data)})// 停⽌计时,输出时间console.timeEnd(' 耗时统计:')})();ajax 请求下载⽂件时进度条事件var xhrOnProgress = function (fun) {return function () {var xhr = $.ajaxSettings.xhr()xhr.onprogress = funreturn xhr}}$.ajax({type: 'GET',url: './全量数据-20220309144842.csv',xhr: xhrOnProgress(function (progress) {const percent = Math.round(progress.loaded / progress.total * 100)console.log(percent + '%')})})fetch 请求下载⽂件时进度条事件/* https:///fetch-progress */;(async () => {// Step 1: start the fetch and obtain a readerlet response = await fetch('./全量数据-20220309144842.csv');const reader = response.body.getReader();// Step 2: get total lengthconst contentLength = +response.headers.get('Content-Length');// Step 3: read the datalet receivedLength = 0; // received that many bytes at the momentlet chunks = []; // array of received binary chunks (comprises the body) while (true) {const { done, value } = await reader.read();if (done) {break;}chunks.push(value);receivedLength += value.length;console.log(`Received ${receivedLength} of ${contentLength}`, )const percent = Math.round(receivedLength / contentLength * 100) console.log(percent + '%')}// Step 4: concatenate chunks into single Uint8Arraylet chunksAll = new Uint8Array(receivedLength); // (4.1)let position = 0;for (let chunk of chunks) {chunksAll.set(chunk, position); // (4.2)position += chunk.length;}// Step 5: decode into a stringlet result = new TextDecoder("utf-8").decode(chunksAll);// We're done!console.log(20220309231613, result)})();。
兼容ie的jqueryajax文件上传
兼容ie的jqueryajax⽂件上传Ajax⽂件上传插件很多,但兼容性各不⼀样,许多是对ie不兼容的,另外项⽬中是要求将⽹页内容嵌⼊到桌⾯端应⽤的,这样就不允许带flash的上传插件了,如:jquery uploadify。
悲剧对于Ajax⽂件上传,⼤体是有: 1、创建⼀个input type="file" 的⽂件上传按钮,根据其id监听绑定其change事件,在事件中⽤jquery创建⼀个iframe,嵌⼊添加隐藏form,同时创建inputtype="file",id相同的⽂件上传按钮,并传⼊其他需要提交的数据,然后提交,提交完成后移除⼀个input type="file",这样⽤bind或on的绑定就对新的input 框失效,需要重新再绑定⼀次change事件,以前的jquery是可以使⽤live函数代替的,现在只能在⽂件上传成功后再绑定⼀次change事件。
1 $(function() {2 uploadFile("fileData",'cn.ftiao.cm.model.LiveCourse','',"CI");3 });45 function uploadFile(id,classFullName,jsonStrValue,preFileName){6 $("#"+id).on("change", function(){7 // 上传⽅法8 $.ajaxFileUpload({9 url:$("#"+id).attr("data-url-upload"), //需要链接到服务器地址10 secureuri:false,11 type:"post",12 fileElementId:id, //⽂件选择框的id属性13 dataType: 'json',14 data:{15 "classFullName":classFullName,16 "jsonStrValue":"",17 "preFileName":preFileName18 },19 //服务器返回的格式,可以是json20 success: function (data, status){ //相当于java中try语句块的⽤法21 $("#courseIconImg").attr("src",$(".ctx").val()+"/images/img-class.png");22 alert("hello");23 //先将原有的上传展⽰清除24 $("#" + id).nextAll("span").remove();25 $("#courseIcon").val(data.outputFileName);26 // $("#coursewareFile").val(data.outputFileName);27 var uploadHtml = "<span id='"+data.outputPreFileName+"_livelesson_div' style='color:#FFFFFF;'>";28 uploadHtml += data.fileUploadName ;29 uploadHtml += "<a name='_LIVELESSON_PRIVIEW'> 预览 </a><a name='_LIVELESSON_DEL'> 删除 </a>";30 uploadHtml += "</span>";31 // $("#"+id).parents("li").append(uploadHtml);32 uploadFile("fileData",'cn.ftiao.cm.model.LiveCourse','',"CI");33 },34 error: function (data, status, e) //相当于java中catch语句块的⽤法35 {36 alert(e);37 }38 });39 });40 return false;41 }View Code 2、创建⼀个 input type="file"的按钮,监听其click事件,然后创建iframe,隐藏form,隐藏form⾥有个 input type="file"的⽂件上传框,模拟点击click,弹出⽂件选择框,选择完⽂件后上传。
Excel文件上传,解析,下载(一文件上传,使用MultipartFile来实现)
Excel⽂件上传,解析,下载(⼀⽂件上传,使⽤MultipartFile来实现)⽂件上传我使⽤的是jquery的⼀个插件"ajaxfileupload.js",使⽤⽅式详见下⾯的⼀种⽅式,使⽤file类型的input,同时需要给button绑定事件,这边使⽤的"ajaxfileupload.js"当中定义的ajax请求,到后台。
<div id="fileupload"><input type="file" id="file" name="file" /><input type="button" id="upload" value="上传⽂件" /></div><script type="text/javascript" src="<%=path%>/js/jquery/jquery-1.5.1.js"></script><script type="text/javascript" src="<%=path%>/js/accnet/common/ajaxfileupload.js"></script>//⽂件上传$(function() {$("#upload").click(ajaxFileUpload);});function ajaxFileUpload() {var url = "/spare/flow.spr?";var method = "method=fileUpload"$.ajaxFileUpload({url : contextPath + url + method,secureuri : false,fileElementId : 'file',dataType : 'text',success : function(data, status) {if (data == "exist") {alert("该⽂件已经存在请勿重复上传");}if (data == "success") {alert("⽂件上传成功");}if (data == "fail") {alert("⽂件上传失败,请重新上传");}},error : function() {}});}后台当中的代码使⽤的是Spring 的mvc框架。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
我是用EASYUI+MVC做项目时遇到的这个问题:使用ajaxFileUpload实现上传,在上传成功后弹出下载框。
网上找了好多资料终于解决了,为了下次再遇到这个问题特此记录一下,代码如下JS中
Upload: function () {
//上传照片文件
//检测是否选择文件
var sName = $("#file_upload").val();
sName = $.trim(sName);
if (sName.length < 1) {
alert("请先选择上传文件!");
$("#file_upload").focus();
return false;
}
// 获取“.”位置
var extStart = stIndexOf(".");
// 获取文件格式后缀,并全部大写
var ext = sName.substring(extStart, sName.length).toUpperCase();
// 判断文件格式
if(ext != ".RAR"&& ext != ".ZIP"&& ext != ".PDF"&& ext != ".DOC"&& ext != ".DOCX" && ext != ".XLS" && ext != ".XLSX") {
alert("文件格式不支持上传。
");
return false;
}
//设置上传提示
$("#file_text").html("上传中...");
$.ajaxFileUpload({
url: '/EHR_HealthEducation/Upload',
secureuri: false,
fileElementId: 'file_upload',
dataType: "JSON",
type: "POST",
success: function (data, status) {
var JsonData = JSON.parse(data);
if (JsonData.status == "success") {
com.message('warning', '上传文件成功');
self.resize();
} else {
com.message('warning', '上传文件失败:' + JsonData.message); }
//设置上传提示
$("#file_text").html("上传文件");
}, error: function (data, status, e) {
com.message('warning', '文件上传失败:' + e.message);
//设置上传提示
$("#file_text").html("上传文件");
}
})
return false;
}
控制器中
public JsonResult Upload()
{
HttpPostedFileBase fileData = Request.Files["file_upload"];
if (fileData != null)
{
try
{
// 文件上传后的保存路径
string filePath = Server.MapPath("/UploadFile/");
if (!Directory.Exists(filePath))
{
Directory.CreateDirectory(filePath);
}
string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
string fileExtension = Path.GetExtension(fileName); // 文件扩展名
//string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
//BERP_WDZX.AddFileName(saveName, fileName);
fileData.SaveAs(filePath + fileName);
MyFilePath = MyFilePath + "/UploadFile/" + fileName + "|";
return Json(new { Success = true, FileName = fileName, SaveName = fileName });
}
catch (Exception ex)
{
return Json(new { Success = false, Message = ex.Message });
}
}
else
{
return Json(new { Success = false, Message = "请选择要上传的文件!" }); }
}
视图:
<input type="file"id="file_upload"name="file_upload"/><div id="file_text">上传文件
说一下我的解决办法
试了各种办法才发现返回的JSON对象需要IE来解析所以会弹出下载框,只需要把返回的JSON格式改一下就行
return Json(new{ Success = true, FileName = fileName, SaveName = fileName },"text/html"); 加上加粗红色部分即可解决。