jQuery多图上传插件imgUp.js

合集下载

JsJq截图并上传

JsJq 截图并上传今天想做⼀个 Js + Jq 截取⽹页图并上传到后端，经过⼀番折腾最终达到了效果。

1·⾸先需要⽤到⼀个⾮常强⼤的外部依赖库 html2canvashtml2canvas 官⽹：去官⽹复制 Js 依赖代码（ html2canvas.js 或 html2canvas.min.js ）新建⼀个js⽂件，把复制的代码放进去，哪个页⾯要⽤就导⼊这个 js导⼊ js 后官⽹给的⽰例只需要两份代码（HTML + Js）代码放⼊后会有两个 Hello world! 下⾯那个就是图⽚，右键可下载2·Base64 转 blob函数3·获取⽣成的图⽚<div id ="capture" style ="padding: 10px; background: #f5da55"><h4 style ="color: #000; ">Hello world!</h4></div >html2canvas(document.querySelector("#capture")).then(canvas => {document.body.appendChild(canvas);});function base64ToBlob(base64, mime) {mime = mime || '';var sliceSize = 1024;var byteChars = window.atob(base64);var byteArrays = [];for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) { var slice = byteChars.slice(offset, offset + sliceSize);var byteNumbers = new Array(slice.length);for (var i = 0; i < slice.length; i++) {byteNumbers[i] = slice.charCodeAt(i);}var byteArray = new Uint8Array(byteNumbers);byteArrays.push(byteArray);}return new Blob(byteArrays, {type: mime});}function getCanvas() {// 获得Canvas 对象let canvas = document.getElementsByTagName("canvas")[0];let ctx = canvas.getContext('2d');ctx.drawImage(canvas, 0, 500, 500, 500); // 参考 drawImage() 函数⽤法 let dataURL = canvas.toDataURL("image/png"); // 将canvas 转换成base64 dataURL = dataURL.substring(dataURL.indexOf(',') + 1, dataURL.length); // console.log(dataURL);var blob = base64ToBlob(dataURL, 'image/png'); // 将base64转换成blob var imgData = new FormData();imgData.append('file', blob); // 上传$.ajax({url: 'http://127.0.0.1:8080/testData',type: "POST",dataType: 'json',contentType: false , //必须加4·SpringBoot接收上⽂有的 Js 可以⽤ Jq 替代，这⾥就不作修改了。

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();}};})();更多精彩内容请参考专题，和进⾏学习。

jQueryFileUpload文件上传插件使用详解

jQueryFileUpload⽂件上传插件使⽤详解　jQuery File Upload 是⼀个Jquery⽂件上传组件，⽀持多⽂件上传、取消、删除，上传前缩略图预览、列表显⽰图⽚⼤⼩，⽀持上传进度条显⽰；⽀持各种动态语⾔开发的服务器端。

特点：拖放⽀持；上传进度条；图像预览；可定制和可扩展的；兼容任何服务器端应⽤平台（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使⽤⽅法：1. 需要加载的js⽂件：jquey-1.8.3.min.jsjquery-ui-widget.jsjquery.iframe-transport.jsjquery.fileupload.js2. html代码：<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>3. js代码：$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text().appendTo(document.body);});}});}); 3.1 显⽰上传进度条：　　$('#fileupload').fileupload({ progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } }); 3.2 需要⼀个<div>容器⽤来显⽰进：　<div id="progress"> <div class="bar" style="width: 0%;"></div> </div>4. API4.1 Initialization：在上传按钮上调⽤fileupload()⽅法;⽰例：$('#fileupload').fileupload();4.2 Options :1: url：请求发送的⽬标urlType: stringExample: '/path/to/upload/handler.json'2.Type: ⽂件上传HTTP请求⽅式，可以选择“POST”，“PUT”或者"PATCH",默认"POST"Type: stringExample: 'PUT'3. dataType:希望从服务器返回的数据类型，默认"json"Type: stringExample: 'json'4. autoUpload:默认情况下，只要⽤户点击了开始按钮被添加⾄组件的⽂件会⽴即上传。

聊一聊jquery文件上传（支持多文件上传）

聊⼀聊jquery⽂件上传（⽀持多⽂件上传）谈到⽂件上传，现在⼀般都⽤现成的组件可以使⽤。

PC端的可以使⽤uploadify。

针对微⽹站H5也有uploadifive。

但是这组件并不能满⾜各种场景的需求，例如：预览切图放⼤缩⼩,取消之类的。

普通上传HTML:<form action="Upload"method="post" enctype="multipart/form-data"><input id="File1"name="fileupload" type="file" value="" /><input id="" type="submit" value="上传" /></form>服务端：[HttpPost]public JsonResult Upload(){if (Request.Files.Count > 0){if (Request.Files.Count == 1){HttpPostedFileBase file = Request.Files[0];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);return Json(new { status = true, url = path });}}else{string[] urllist = new string[Request.Files.Count];for (int i = 0; i < Request.Files.Count; i++){HttpPostedFileBase file = Request.Files[i];if (file.ContentLength > 0){string title = string.Empty;title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);string path = "../UploadFile/" + title;path = System.Web.HttpContext.Current.Server.MapPath(path);file.SaveAs(path);urllist[i] = path;}}return Json(new { status = true, url = urllist });}}else{return Json(new { status = false, url = "",msg="没有⽂件" });}return Json(new { status = false, url = "",msg=""});}后端代码没什么不同的，⼀直就是如此主要是前端html，我标记为红⾊字体的属性⼀个都不能少，少⼀个都不可能完成上传action作⽤：该属性的值指向要提交到某⼀个页⾯,缺少它会不知道提交给谁可以提交的页⾯：abc.aspx abc.ashx mvc的控制器⽅法 webapi接⼝以及其他后端处理程序method作⽤：该属性的值决定以何种⽅式提交,缺少它会报404可以取的值：post get put deleteenctype作⽤：指定类型缺少它在后台接收时⽂件并不会包含进去可以取的值：multipart/form-data application/x-www-form-urlencoded text/plain 此处必须使⽤ multipart/form-data才能将⽂件传到服务端nameinput file ⾥⾯必须包含name属性才能够将⽂件传递到服务器,具体原因不知道,有兴趣的可以尝试下如果有知道的⿇烦解惑相信到了这⾥你⼀定可以完成上传⽂件操作了！⽂件类型筛选能完成基本的⽂件上传操作之后，我们会对它有更多的要求，⽐如：⽂件筛选相信⼤家都不愿意让⼈什么类型的⽂件都往服务器上传，万⼀是病毒或者脚本之类的就⿇烦⼤了。

jquery组件WebUploader文件上传用法详解

jquery组件WebUploader⽂件上传⽤法详解WebUploader是由Baidu WebFE(FEX)团队开发的⼀个简单的以HTML5为主,FLASH为辅的现代⽂件上传组件,下⽂来为各位演⽰⼀下关于jquery WebUploader⽂件上传组件的⽤法。

使⽤WebUploader还可以批量上传⽂件、⽀持缩略图等等众多参数选项可设置，以及多个事件⽅法可调⽤，你可以随⼼所欲的定制你要的上传组件。

接下来我以图⽚上传实例，给⼤家讲解如何使⽤WebUploader。

HTML我们⾸先将css和相关js⽂件加载。

课题_jquery批量上传图片+缩略图+水印

jquery批量上传图片+缩略图+水印图片上传+缩略图+水印处理代码：//文件上传Public function _upload( $thumb = false , $thumbWidth = '' , $thumbHeight = '') {$upload = new \Think\Upload();// 实例化上传类$upload->maxSize = 3145728 ;// 设置附件上传大小$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型$upload->savePath = '/' . CONTROLLER_NAME .'/'; // 设置附件上传目录$info = $upload->upload();if(!$info) {return array('status' =>0, 'info'=> $upload->getError() );}else{if( $thumb ) { //生成缩略图$image = new \Think\Image();foreach($info as $file) {$thumb_file = './Uploads/' . $file['savepath'] . $file['savename'];$save_path = './Uploads/' .$file['savepath'] . 'mini_' . $file['savename'];$image->open( $thumb_file )->text('德兴房产','./data/1.otf',30,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->save( $thumb_file ); $image->open( $thumb_file )->text('德兴房产','./data/1.otf',24,'#A7AAA4',\Think\Image::IMAGE_WATER_SOUTHWEST)->thumb( $thumbWidth, $thumbHeight )->save( $save_path );return array('status' => 1,'savepath' => $file['savepath'],'savename' => $file['savename'],'pic_path' => $file['savepath'] . $file['savename'],'mini_pic' => $file['savepath'] . 'mini_' .$file['savename']);}}else{foreach($info as $file) {return array('status' => 1,'savepath' => $file['savepath'],'savename' => $file['savename'],'pic_path' => $file['savepath'].$file['savename']);}}}}前端主要代码（参考:///code/151.html）：<div class="tab-pane" id="tab3"><div class="row"><div class="col-md-12"><div class="tab-pane"><div class="form-group"><input type="file" id="upload" class="form-control input-medium" /></div><div style="width:100%; float:left;padding:10px 20px 20px; background-color:#ccc"><p><ul class="imagelist" id="image_result"></ul></p></div></div></div></div></div> <div class="margin-top-10"><button type="submit" class="btn green ajax-post">确认</button><a href="javascript:" onclick="javascript:history.back(-1);return false;" class="btn default">返回</a></div></div></div></form></div></div></block><block name="foot"><link href="__PUBLIC__/assets/plugins/uploadify/uploadify.css" rel="stylesheet" type="text/css"/><link href="__PUBLIC__/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/><script src="__PUBLIC__/assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript" ></script><script src="__PUBLIC__/assets/plugins/uploadify/jquery.uploadify.min.js" type="text/javascript" ></script><script type="text/javascript">$(function(){var sid = "{:session_id()}";$('#upload').uploadify({'swf':'__PUBLIC__/assets/plugins/uploadify/uploadify.swf','buttonText': '选择图片','formData': { 'session_id':sid},'uploader': "{:U('uploadPic')}",'fileTypeDesc':'Image File','fileTypeExts':'*.jpg; *.jpeg; *.gif; *.png','auto' : true,'removeCompleted': false,onUploadSuccess: function(file, data, response) {$('#progress').hide();var result = $.parseJSON(data);//错误处理。

jquery异步上传图片

jquery异步上传图⽚⽤ajaxfileupload.js插件实现图⽚的异步上传html代码<input id="img" type="file" name="img" />Js代码$('#img').change(function () {$.ajaxFileUpload({url:'demo.php', //你处理上传⽂件的服务端secureuri:false,fileElementId:'img',//与页⾯处理代码中file相对应的ID值 processData : false, contentType : false, dataType: 'text', //返回数据类型:看后端返回的是什么数据,在IE下后端要设置请求头的Content-Type:text/html; charset=UTF-8 success: function (data, status) {},error: function(data, status, e){ //提交失败⾃动执⾏的处理函数alert(e);}})});//可以添加⽂件后缀判断php代码<?php$path = "./";$extArr = array("jpg", "png", "gif");if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){$name = $_FILES['img']['name'];$size = $_FILES['img']['size'];if(empty($name)){echo '请选择要上传的图⽚';exit;}$ext = extend($name);if(!in_array($ext,$extArr)){echo '图⽚格式错误！';exit;}if($size>(100*1024)){echo '图⽚⼤⼩不能超过100KB';exit;}$image_name = time().rand(100,999).".".$ext;$tmp = $_FILES['img']['tmp_name'];if(move_uploaded_file($tmp, $path.$image_name)){echo '<img src="'.$path.$image_name.'" class="preview">';}else{echo '上传出错了！';}exit;}//获取⽂件类型后缀function extend($file_name){$extend = pathinfo($file_name);$extend = strtolower($extend["extension"]);return $extend;}参考博客:。

jQueryFileUpload等插件的使用实例

jQueryFileUpload等插件的使⽤实例1、jQuery FileUpload需要的js：jquery.jsjquery.fileupload.jsjquery.iframe-transport.jsjquery.xdr-transport.jshtml:<div id="divAdd" title="添加"><div>+</div><input id="fileUpload" type="file"/></div>CSS:/** 选择⽂件按钮样式*/#fileUpload {position: absolute;top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';direction: ltr;cursor: pointer;width:100px;height:100px;}/* Fixes for IE < 8 */@media screen\9 {#fileUpload {filter: alpha(opacity=0);}}/** 其他样式*/#divAdd{border:1px solid #ccc;width:99px;height:99px;text-align:center;font-size:40px;margin:17px 5px 10px 5px;cursor: pointer;position: relative;overflow:hidden;}#divAdd div{margin-top:18%;}js初始化：function initUploadDlg(){$("#fileUpload").fileupload({url: "/WealthManagement/WFC/FileUpload.aspx",dataType: 'json',add: function (e, data) {var fileName = data.files[0].name;var fileType = fileName.substr(stIndexOf(".") + 1);// 可以通过data.files[0].size获取⽂件⼤⼩$.blockUI({message: $("#downloadMsg")});title = fileName.substring(stIndexOf('\\') + 1, stIndexOf('.'));$("#fileUpload").fileupload('option','formData',{'title': title, 'validDate': '', 'windcode': pageBaseInfo.Windcode}); // 传参不能放在初始化语句中，否则只能传递参数的初始化值data.submit();},progress: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$("#downloadMsg").html('已上传' + progress + '%');if(progress == '100'){$("#downloadMsg").html('处理中...');}},done: function (e, data) {var res = data.result.Response;if(res && res.Status == 0){// 更新⽂件列表updateFundFiles();}else{alert(res ? res.Message : "上传失败，请重试！");}$.unblockUI();}});后台代码（HttpHandler.cs）public class FileUploadHandler : IHttpHandler{public override void ProcessRequest(HttpContext context){FileUploadResponse res = new FileUploadResponse();try{// 获取⽂件流HttpFileCollection files = context.Request.Files;if (files.Count > 0){// 获取相关参数的⽅法string title = context.Request["title"];string validDate = context.Request["validDate"];string windcode = context.Request["windcode"] ;string path = FundIntroductionBiz.tempFilePath;if (!Directory.Exists(path)){Directory.CreateDirectory(path);}string fileName = windcode + "_" + DateTime.Now.ToString("yyyyMMddHHmmss") + System.IO.Path.GetExtension(files[0].FileName);string fullPath = path + fileName;files[0].SaveAs(fullPath);res.Response.Status = 0;res.Response.Message = "上传成功！";}}catch (Exception ex){res.Response.Status = 2;res.Response.Message = ex.Message;}context.Response.Write(JsonHelper.ToJson(res));context.Response.End();}}///<summary>///⽂件上传响应实体类///</summary>public class FileUploadResponse{public FileUploadEntity Response { get; set; }public FileUploadResponse(){Response = new FileUploadEntity();}///<summary>///返回信息实体类///</summary>public class FileUploadEntity{///<summary>/// 0:上传成功，1：上传失败, 2:程序异常///</summary>public int Status { get; set; }///<summary>///详细信息///</summary>public string Message { get; set; }}}注：上传按钮的样式采⽤的⽅式为，将input定位在所需按钮之上，并设为透明。

jquery批量上传图片实现代码

jquery批量上传图⽚实现代码复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title>upload</title><link href="upload.css" rel="Stylesheet" /></head><body><form><ul><li><button id="SubUpload" onclick="TSubmitUploadImageFile();return false;">确定上传</button>  <button id="CancelUpload" class="ManagerButton" onclick="javascript:history.go(-1);">取消</button>  <button id="AddUpload" class="ManagerButton" onclick="TAddFileUpload();return false;">增加</button></li></ul><ul id="loadimage"><li><div class="imagelabel">图⽚1:</div><div class="imagepath"><input name="" size="45" id="uploadImg1" type="file" /></div><div class="loadinfo"><span id="uploadImgState1"></span></div></li></ul></form></body></html><script type="text/javascript" src="/JS/jquery-1.3.2-vsdoc.js"></script><script type="text/javascript">var TfileUploadNum = 1; //记录图⽚选择框个数var Tnum = 1; //ajax上传图⽚时索引//增加上传按钮function TAddFileUpload() {var idnum = TfileUploadNum + 1;var str = "<li>";str += "<div class='imagelabel'>图⽚" + idnum + ":</div>";str += "<div class='imagepath'><input name='' size='45' id='uploadImg" + idnum + "' type='file' /></div>";str += "<div class='loadinfo'><span id='uploadImgState" + idnum + "'></span></div>";str += "</li>";$("#loadimage").append(str);TfileUploadNum += 1;}//开始上传function TSubmitUploadImageFile() {document.getElementById("SubUpload").disabled = true;document.getElementById("CancelUpload").disabled = true;document.getElementById("AddUpload").disabled = true;setTimeout("TajaxFileUpload()", 1000); //此为关键代码}//Ajax上传⽅法function TajaxFileUpload() {if (Tnum < TfileUploadNum + 1) {//准备提交处理$("#uploadImgState" + Tnum).html("<img src='/gif/upfileloader.gif'/>");//开始提交$.ajax({type: "POST",url: "Handler.ashx",data: { upfile: $("#uploadImg" + Tnum).val()},success: function(data, status) {var stringArray = data.split("|");//stringArray[0] 成功状态(1为成功，0为失败)//stringArray[1] 上传成功的⽂件名//stringArray[2] 消息提⽰if (stringArray[0] == "1") {//上传成功$("#uploadImgState" + Tnum).html("<img src='/gif/Success.gif' />" + stringArray[1] + "--" + stringArray[2]); }else {//上传出错$("#uploadImgState" + Tnum).html("<img src='/gif/Error.gif' />" + stringArray[1] + "--" + stringArray[2]);}Tnum++;setTimeout("TajaxFileUpload()", 1000);}});}else {document.getElementById("SubUpload").disabled = false;document.getElementById("CancelUpload").disabled = false;document.getElementById("AddUpload").disabled = false;}} </script>复制代码代码如下:<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.IO;using System.Text;using ;public class Handler : IHttpHandler{public void ProcessRequest(HttpContext context){//源图⽚路径string _fileNamePath = "";try{_fileNamePath = context.Request.Form["upfile"];string _savedFileResult = UpLoadFile(_fileNamePath); //开始上传context.Response.Write(_savedFileResult);//返回上传结果}catch{context.Response.Write("0|error|⽂件路径错误");}}/// <summary>/// 保存图⽚/// </summary>/// <param name="fileNamePath"></param>/// <returns></returns>private string UpLoadFile(string fileNamePath){//图⽚格式string fileNameExt = fileNamePath.Substring(fileNamePath.IndexOf('.')).ToLower();if (!CheckFileExt(fileNameExt)) return "0|error|图⽚格式不正确!";//保存路径string toFilePath = "ProductUpload/";//物理完整路径string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);//检查是否有该路径没有就创建if (!Directory.Exists(toFileFullPath)){Directory.CreateDirectory(toFileFullPath);}//⽣成将要保存的随机⽂件名string toFileName = GetFileName();//将要保存的完整路径string saveFile=toFileFullPath +toFileName + fileNameExt;///创建WebClient实例WebClient myWebClient = new WebClient();//设定windows⽹络安全认证myWebClient.Credentials = CredentialCache.DefaultCredentials;//要上传的⽂件FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); BinaryReader r = new BinaryReader(fs);//使⽤UploadFile⽅法可以⽤下⾯的格式myWebClient.UploadFile(saveFile,fileNamePath);return "1|"+toFileName+fileNameExt+"|保存成功.";}/// <summary>/// 检测图⽚类型/// </summary>/// <param name="_fileExt"></param>/// <returns>正确返回True</returns>private bool CheckFileExt(string _fileExt){string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };for (int i = 0; i < allowExt.Length; i++){if (allowExt[i] == _fileExt) { return true; }}return false;}/// <summary>/// 得到随机图⽚名/// </summary>/// <returns></returns>public static string GetFileName(){Random rd = new Random();StringBuilder serial = new StringBuilder();serial.Append(DateTime.Now.ToString("yyMMddHHmmssff"));serial.Append(rd.Next(0, 9999).ToString());return serial.ToString();}public bool IsReusable{get{return false;}}}复制代码代码如下:body{font-size: 12pt;}ul{list-style: none;}li{margin: 0px;}#loadimage{width: 860px;overflow: hidden;}.imagelabel{ float: left; width: 60px; height: 25px;} .imagepath{float: left; width: 400px; height: 25px; } .loadinfo{float: left; width: 400px;height: 25px;}。

使用jquery.form.js实现图片上传的方法

这篇文章主要介绍了使用jquery.form.js实现图片上传的方法,涉及jquery使用表单插件jquery.form.js进行图片上传的提交、类型验证、执行结果回调显示等技巧,非常简单实用,需要的朋友可以参考下本文实例讲述了使用jquery.form.js实现图片上传的方法。

分享给大家供大家参考，具体如下：testupfile2.php<?phpheader('Content-type:text/html;charset=utf-8');include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg',   'image/jpeg',   'image/png',   'image/pjpeg',   'image/gif',   'image/bmp',   'image/x-png' );$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';$upfile=$_FILES['upfile'];$name=$upfile['name'];$ext=substr($upfile['name'],strpos($upfile['name'],'.'));$upname=md5(time().rand(1, 1000)).$ext;$type=$upfile['type'];$size=$upfile['size'];$tmp_name=$upfile['tmp_name'];$error=$upfile['error'];$ok=0; foreach ($image as $key=>$value) { if($type==$value)$ok=1; } if($ok=='1' && $error=='0'){ move_uploaded_file($tmp_name,$updir.$upname); //echo '<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上传成功'; //echo '上传成功'; echo $upname; //$im=$updir.$upname; //echo $im; //echo '<img src='.$updir.$upname.' />'; //$views->assign('image',$upname); //$views->display('default/testupfile.html'); } else echo '上传失败2';}else echo '上传失败1';?>testupfile.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="/scripts/jquery.js"></script><script type="text/javascript" src="/scripts/jquery.form.js"></script><script type="text/javascript">$(function(){ //jquery.form image1 $("#upimage").bind("click",function(){ if($("#upfile").val()==""){  alert("请选择一个图片文件,再点击");  return; } $("#form1").ajaxSubmit({  url:"testupfile2.php",  type:"POST",  //date:"upfile=upfile",  success:function(response){  alert(response);  $("#ln").empty();  $("#ln").append("<img src='/attached/images/"+response+"' width='100' height='60'/>");  $("#im1").val(response);  },  error:function(msg){  alert("出错了");  } }); }); //jquery.form image2 $("#upimage2").bind("click",function(){ if($("#upfile2").val()==""){  alert("请选择一个图片文件,再点击2");  return; } $("#form2").ajaxSubmit({  url:"testupfile2.php",  type:"POST",  //date:"upfile=upfile2",  success:function(response2){  alert(response2);  $("#ln2").empty();  $("#ln2").append("<img src='/attached/images/"+response2+"' width='100' height='60'/>");  $("#im2").val(response2);  },  error:function(msg){  alert("出错了");  } }); });});</script></head><body>文件上传<form enctype="multipart/form-data" id="form1" method="post" action="">文件: <input type="file" name="upfile" id="upfile"><input type="button" id="upimage" value="图片上传1"> <input type="text" name="im1" id="im1" value="" /></form><form enctype="multipart/form-data" id="form2" method="post" action="">文件: <input type="file" name="upfile" id="upfile2"><input type="button" id="upimage2" value="图片上传2"> <input type="text" name="im2" id="im2" value="" /></form><div id="ln">tu</div><br><div id="ln2">tu2</div></body></html>希望本文所述对大家jQuery程序设计有所帮助。

imagepreview用法

imagepreview用法imagepreview是一个jQuery插件，可以在网页上预览图片。

使用方法如下：1. 引入jQuery和imagepreview的js和css文件。

```。

```。

2. 给需要预览的图片添加class名 "imagepreview" 并设置data-src属性。

```。

<img class="imagepreview" data-src="path/to/image.jpg" alt="图片">。

```。

3.初始化插件。

```。

$(document).ready(function() 。

$('.imagepreview').imagepreview();。

});。

```。

4.可以选择自定义一些参数，如图片放大倍数、动画时间等。

```。

$(document).ready(function() 。

$('.imagepreview').imagepreview(。

fullscreen: true, //是否全屏显示。

bg_opacity: 0.7, //背景透明度。

animation_speed: 100, //动画时间。

zoom_factor: 0.1, //图片放大倍数。

onOpen: function() {}, //展开前的回调函数。

jquery-fileupload插件的使用

jquery-fileupload插件的使⽤使⽤步骤github地址：中⽂⽂档：引包<script src="///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="js/vendor/jquery.ui.widget.js"></script><script src="js/jquery.iframe-transport.js"></script><script src="js/jquery.fileupload.js"></script>html结构<input id="fileupload" type="file" name="files" data-url="server/php/" multiple>js代码$("#fileupload").fileupload({dataType:"json",//e：事件对象//data：图⽚上传后的对象，通过data.result.picAddr可以获取上传后的图⽚地址done:function (e, data) {console.log(data);}});。

使用Ajaxuploadjs上传文件

使用Ajaxupload.js上传文件大岩不灿发表于2014年1月12日浏览2,164 次ajaxupload.js 是一款使用jquery上传文件的js插件，对于简单的文件上传，足够可以应付。

该插件主要有以下几个选项：1 2 3 4 5 6 7 8 9101112131415 settings ={action:'upload.php',//要提交的地址name:'userfile',//参数名次data:{},//和文件一起提交的其它参数autoSubmit:true,//选中文件后是否就提交responseType:false,//返回的相应格式，如果是text格式的，会在响应前后加上一个<pre></pre>标签hoverClass:'hover',disabledClass:'disabled',onChange:function(file, extension){//在选中了文件的时候触发},onSubmit:function(file, extension){//在提交的时候触发},onComplete:function(file, response){//上传结束的时候触发}}你可以使用非自动提交的方式上传文件。

代码示例如下：1 2 3 4 5 6 7 8 91011121314151617 var ajaxupload =new AjaxUpload($("#uploadFile_button"),{ action:"upload.action",type:"POST",data:{},autoSubmit:false,responseType:"json",name:'file',onChange:function(file, ext){if(ext &&(/^(xls)$/.test(ext))){alert("只支持xls格式的文件");}},onComplete:function(file, resp){alert("上传成功");}});以上代码绑定了id=uploadFile_button的html元素，只要点击它，就会弹出选择文件的对话框。

20款最好的jQuery文件上传插件

20款最好的jQuery⽂件上传插件当它是关于开发⽹络应⽤程序和⽹页的时候，⽂件上传功能的重要性是不容忽视的。

⼀个⽂件上传功能可以让你上传所有类型的⽂件在⽹站上，包括视频，图像，⽂件和更多。

创建⼀个⽂件上传功能，对你的⽹站是不是很难，有⼀点点的理解和⼀些代码，你可以⾃⼰做的。

然⽽，它不再只是简单地将图像上传到托管服务器上。

有⼀个额外的功能，这些都需要这些天。

例如，当⽤户正在上载⽂件时，他可能会⽴即看到⽂件信息，包括预览。

等特⾊种植，多上传，或调整也很重要，这些天。

这也就是为什么随着⽂件上传功能还有需要建⽴⼀个友好的⽤户界⾯。

这是令⼈难以置信的脚本语⾔如jQuery进⼊画⾯。

互联⽹上有⼤量的jQuery⽂件上传插件。

我们精⼼挑选的⼀些，编制了⼀份清单，你不没有冲刷⽹络它。

这些插件都有你需要的⽂件上传。

1.Closifyclosify是⼀个基于jQuery的插件，简化了开发⼈员的任务是创造⼀个动态图像上传。

与closify可以轻松创建任何图像画布（封⾯，简介，或⾃定义横幅）⽆论⼤⼩你定义，智能不够closify插件将调整图像⼤⼩根据你定义的容器与尊重的图像长宽⽐的⼤⼩，然后它开始产⽣⼀个动态的⼩⼯具，给你的能⼒定位/定位你的照⽚充分；保存照⽚所需的位置并提交位置信息到服务器端存储；你选择只删除选中的照⽚照⽚的变化。

2.Peak UploadPeak Upload是⼀个jQuery插件，可以让你轻松地添加多个或单个⽂件上传功能到你的⽹站。

这个插件使⽤HTML5的唯⼀。

3.PlupUploadPlupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种⽅法进⾏⽂件上传。

4.FileDrop.jsFileDrop是⾃包含的跨浏览器的HTML5，legacy，Ajax，JavaScript⽂件的拖放上传。

jQuery实现图片上传预览效果功能完整实例【测试可用】

jQuery实现图⽚上传预览效果功能完整实例【测试可⽤】本⽂实例讲述了jQuery实现图⽚上传预览效果功能。

分享给⼤家供⼤家参考，具体如下：<!DOCTYPE html><html><head><meta charset="utf-8" /><title> jquery图⽚上传预览效果</title><script src="/jquery/2.0.0/jquery.min.js"></script></head><body><input type="file" id="browsefile" ><div class="images_show" id="images_show"><p class="first">上传图⽚预览区</p><p>图⽚仅限JPG、PNG格式</p><p>⽂件尺⼨：532×400px</p><p>⽂件⼤⼩：200K以内</p></div></div><script type="text/javascript">//处理file input加载的图⽚⽂件$(document).ready(function(e) {//判断浏览器是否有FileReader接⼝if(typeof FileReader =='undefined'){/*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不⽀持HTML5的FileReader接⼝,⽆法使⽤图⽚本地预览,请更新浏览器获得最好体验');*/ //如果浏览器是ieif($.browser.msie===true){//ie6直接⽤file input的value值本地预览if($.browser.version==6){$("#browsefile").change(function(event){//ie6下怎么做图⽚格式判断?var src = event.target.value;//var src = document.selection.createRange().text; //选中后 selection对象就产⽣了这个对象只适合ievar img = '<img src="'+src+'" width="200px" height="200px" />';$("#images_show").empty().append(img);});}//ie7,8使⽤滤镜本地预览else if($.browser.version==7 || $.browser.version==8){$("#browsefile").change(function(event){$(event.target).select();var src = document.selection.createRange().text;var dom = document.getElementById('images_show');console.log(src);//使⽤滤镜成功率⾼$("#images_show").css({"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"});/*dom.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= src;*/dom.innerHTML = '<img id="head" alt=" " src=+src+ />';//使⽤和ie6相同的⽅式设置src为绝对路径的⽅式有些图⽚⽆法显⽰效果没有使⽤滤镜好/*var img = '<img src="'+src+'" width="200px" height="200px" />';$("#images_show").empty().append(img);*/});}}//如果是不⽀持FileReader接⼝的低版本firefox 可以⽤getAsDataURL接⼝else if($.browser.mozilla===true){$("#browsefile").change(function(event){//firefox2.0没有event.target.files这个属性就像ie6那样使⽤value值但是firefox2.0不⽀持绝对路径嵌⼊图⽚放弃firefox2.0//firefox3.0开始具备event.target.files这个属性并且开始⽀持getAsDataURL()这个接⼝⼀直到firefox7.0结束不过以后都可以⽤HTML5的FileReader接⼝了 if(event.target.files){//console.log(event.target.files);for(var i=0;i<event.target.files.length;i++){var img = '<img src="'+event.target.files.item(i).getAsDataURL()+'" width="200px" height="200px"/>';$("#images_show").empty().append(img);}}else{//console.log(event.target.value);//$("#imgPreview").attr({'src':event.target.value});}});}}else{// version 1/*$("#imgUpload").change(function(e){var file = e.target.files[0];var fReader = new FileReader();//console.log(fReader);//console.log(file);fReader.onload=(function(var_file){return function(e){$("#imgPreview").attr({'src':e.target.result,'alt':var_});}})(file);fReader.readAsDataURL(file);});*///单图上传 version 2/*$("#imgUpload").change(function(e){var file = e.target.files[0];var reader = new FileReader();reader.onload = function(e){//displayImage($('bd'),e.target.result);//alert('load');$("#imgPreview").attr({'src':e.target.result});}reader.readAsDataURL(file);});*///多图上传 input file控件⾥指定multiple属性 e.target是dom类型$("#browsefile").change(function(e){for(var i=0;i<e.target.files.length;i++){var file = e.target.files.item(i);//允许⽂件MIME类型也可以在input标签中指定accept属性//console.log(/^image\/.*$/i.test(file.type));if(!(/^image\/.*$/i.test(file.type))){continue; //不是图⽚就跳出这⼀次循环}//实例化FileReader APIvar freader = new FileReader();freader.readAsDataURL(file);freader.onload=function(e){var img = '<img src="'+e.target.result+'" width="200px" height="200px"/>';$("#images_show").empty().append(img);}}});//处理图⽚拖拽的代码var destDom = document.getElementById('images_show');destDom.addEventListener('dragover',function(event){event.stopPropagation();event.preventDefault();},false);destDom.addEventListener('drop',function(event){event.stopPropagation();event.preventDefault();var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的⽂件信息暂时取⼀个//console.log(event.dataTransfer.files.item(0).type);if(!(/^image\/.*$/.test(img_file.type))){alert('您还未拖拽任何图⽚过来,或者您拖拽的不是图⽚⽂件');return false;}fReader = new FileReader();fReader.readAsDataURL(img_file);fReader.onload = function(event){destDom.innerHTML='';destDom.innerHTML = '<img src="'+event.target.result+'" width="200px" height="200px"/>'; };},false);}});</script></body></html>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

jquery实现上传图片功能

jquery实现上传图⽚功能本⽂实例为⼤家分享了jquery实现上传图⽚功能的具体代码，供⼤家参考，具体内容如下代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>点击头像上传图⽚</title><style>*{margin:0;padding: 0;}div,#avarimgs,#xdaTanFileImg{width: 100px;height: 100px;}div{margin:50px auto;position: relative;}#xdaTanFileImg{position: absolute;top: 0;left: 0;opacity: 0;}</style></head><body><div><input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"><img src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3787285033,4172246344&fm=26&gp=0.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs"> </div></body><script src="/jquery-2.1.1.min.js"></script><script type="text/javascript">if (typeof FileReader == 'undefined') {document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不⽀持FileReader接⼝</h1>";document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");}//选择图⽚，马上预览function xmTanUploadImg(obj) {console.log(obj)var file = obj.files[0];console.log(obj);console.log(file);console.log("file.size = " + file.size);var reader = new FileReader();reader.onloadstart = function (e) {console.log("开始读取....");}reader.onprogress = function (e) {console.log("正在读取中....");}reader.onabort = function (e) {console.log("中断读取....");}reader.onerror = function (e) {console.log("读取异常....");}reader.onload = function (e) {console.log("成功读取....");var img = document.getElementById("avarimgs");img.src = e.target.result;//或者 img.src = this.result; //e.target == this}reader.readAsDataURL(file)}</script></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jQuery插件AjaxFileUpload可以实现文件上传

jQuery插件AjaxFileUpload可以实现ajax文件上传，该插件使用非常简单，首先了解一下正确使用AjaxFileUpload插件的方法，然后再了解一些常见的错误信息和解决方法。

使用说明需要使用jQuery库文件和AjaxFileUpload库文件使用实例一，包含文件部分复制代码代码如下:<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ajaxfileupload.js"></script>二，HTML部分复制代码代码如下:<img id="loading " src="loading.gif" style="display:none;"><input id="fileToUpload " type="file" size="20" name="fileToUpload " class="input"> <button class="button" id="buttonUpload" onclick="return ajaxFileUpload ();">上传</button>只需要三个元素，一个动态加载小图标、一个文件域和一个按钮注意：使用AjaxFileUpload插件上传文件可不需要form，如下：<form name="form" action="" method="POST" enctype="multipart/form-data"> ……相关html代码……</form>因为AjaxFileUpload插件会自动生成一个form提交表单。

js异步上传多张图片插件的使用方法

js异步上传多张图⽚插件的使⽤⽅法本⽂为⼤家分享了js异步上传多张图⽚插件的使⽤⽅法，供⼤家参考，具体内容如下效果展⽰：功能描述：1.实现图⽚预览，预览图⽚移除，任意张数异步上传，上传进度条指⽰，已选中且上传的图⽚不会重复上传，且不能移除使⽤⽅法：界⾯顶部引⼊IMGUP.css，2.0版本以下的Jquery，页⾯底部引⼊IMGUP.js界⾯中必须存在三个元素1、图⽚选择： id必须是“div_imgfile”，可以是任意元素，onclick事件触发选择对话框2、图⽚预览容器：id必须是“div_imglook”的div，⾥⾯包含⼀个清除浮动的div3、确定上传按钮：id必须是“btn_ImgUpStart”，可以是任意元素，onclick事件开始上传全部选中图⽚样式可随意更改，js⽂件顶部有三个变量，可以分别设置单张图⽚⼤⼩限制，单位MB，最多选中图⽚张数，异步提交服务端位置ajax中回调函数可以修改提⽰信息样式，查找“alert”也可。

<body><div id="div_imgfile">选择图⽚</div><div id="div_imglook"><div style="clear: both;"></div></div><input type="button" value="确定上传" id="btn_ImgUpStart" /></body><style>/*选择图⽚框样式*/#div_imgfile {width: 130px;height: 130px;text-align: center;line-height: 130px;font-family: 微软雅⿊;font-size: 16px;box-sizing: border-box;border: 2px solid #808080;cursor: pointer;}/*选择图⽚框⿏标移⼊移出效果*/#div_imgfile:hover {background-color: #d1cfcf;}.imgfile {display: none;}/*这⾥是图⽚预览容器样式*/#div_imglook {margin-top: 20px;background-color: #FFEFD5;}/*单个图⽚预览模块样式*/.lookimg {width: 130px;height: 130px;box-sizing: border-box;border: 1px solid #808080;float: left;margin-right: 10px;position: relative;}.lookimg img {width: 100%;height: 100%;}/*删除按钮样式*/.lookimg_delBtn {position: absolute;bottom: 0px;left: 0px;width: 100%;height: 30px;text-align: center;line-height: 30px;background-color: #808080;opacity: 0.8;color: white;font-size: 16px;font-family: 微软雅⿊;display: none;cursor: pointer;}/*删除按钮移⼊移出效果*/.lookimg_delBtn:hover {opacity: 1;}/*上传进度条样式*/.lookimg_progress {position: absolute;bottom: 15px;left: 0px;width: 100%;height: 20px;background-color: #e0e0e0;box-sizing: border-box;border: 1px solid black;display: none;text-align: center;line-height: 20px;font-size: 14px;}.lookimg_progress div {position: absolute;left: 0px;top: 0px;height: 100%;width: 0px;background-color: #e9cc2e;}/*确定上传按钮样式*/#btn_ImgUpStart {width: 130px;height: 40px;margin-top: 30px;}</style><script>var IMG_LENGTH = 1;//图⽚最⼤1MBvar IMG_MAXCOUNT = 5;//最多选中图⽚张数var IMG_AJAXPATH = "ajax/ImgUpLoad.ashx";//异步传输服务端位置var UP_IMGCOUNT = 0;//上传图⽚张数记录//打开⽂件选择对话框$("#div_imgfile").click(function () {if ($(".lookimg").length >= IMG_MAXCOUNT) {alert("⼀次最多上传" + IMG_MAXCOUNT + "张图⽚");return;}var _CRE_FILE = document.createElement("input");if ($(".imgfile").length <= $(".lookimg").length) {//个数不⾜则新创建对象_CRE_FILE.setAttribute("type", "file");_CRE_FILE.setAttribute("class", "imgfile");_CRE_FILE.setAttribute("accept", ".png,.jpg,.jpeg");_CRE_FILE.setAttribute("num", UP_IMGCOUNT);//记录此对象对应的编号 $("#div_imgfile").after(_CRE_FILE);}else { //否则获取最后未使⽤对象_CRE_FILE = $(".imgfile").eq(0).get(0);}return $(_CRE_FILE).click();//打开对象选择框});//创建预览图，在动态创建的file元素onchange事件中处理$(".imgfile").live("change", function () {if ($(this).val().length > 0) {//判断是否有选中图⽚//判断图⽚格式是否正确var FORMAT = $(this).val().substr($(this).val().length - 3, 3);if (FORMAT != "png" && FORMAT != "jpg" && FORMAT != "peg") {alert("⽂件格式不正确");return;}//判断图⽚是否过⼤，当前设置1MBvar file = this.files[0];//获取file⽂件对象if (file.size > (IMG_LENGTH * 1024 * 1024)) {alert("图⽚⼤⼩不能超过" + IMG_LENGTH + "MB");$(this).val("");return;}//创建预览外层var _prevdiv = document.createElement("div");_prevdiv.setAttribute("class", "lookimg");//创建内层img对象var preview = document.createElement("img");$(_prevdiv).append(preview);//创建删除按钮var IMG_DELBTN = document.createElement("div");IMG_DELBTN.setAttribute("class", "lookimg_delBtn");IMG_DELBTN.innerHTML = "移除";$(_prevdiv).append(IMG_DELBTN);//创建进度条var IMG_PROGRESS = document.createElement("div");IMG_PROGRESS.setAttribute("class", "lookimg_progress");$(IMG_PROGRESS).append(document.createElement("div"));$(_prevdiv).append(IMG_PROGRESS);//记录此对象对应编号_prevdiv.setAttribute("num", $(this).attr("num"));//对象注⼊界⾯$("#div_imglook").children("div:last").before(_prevdiv);UP_IMGCOUNT++;//编号增长防重复//预览功能 startvar reader = new FileReader();//创建读取对象reader.onloadend = function () {preview.src = reader.result;//读取加载，将图⽚编码绑定到元素}if (file) {//如果对象正确reader.readAsDataURL(file);//获取图⽚编码} else {preview.src = "";//返回空值}//预览功能 end}});//删除选中图⽚$(".lookimg_delBtn").live("click", function () {$(".imgfile[num=" + $(this).parent().attr("num") + "]").remove();//移除图⽚file $(this).parent().remove();//移除图⽚显⽰});//删除按钮移⼊移出效果$(".lookimg").live("mouseover", function () {if ($(this).attr("ISUP") != "1")$(this).children(".lookimg_delBtn").eq(0).css("display", "block");;});$(".lookimg").live("mouseout", function () {$(this).children(".lookimg_delBtn").eq(0).css("display", "none");;});//确定上传按钮$("#btn_ImgUpStart").click(function () {if ($(".lookimg").length <= 0) {alert("还未选择需要上传的图⽚");return;}//全部图⽚上传完毕限制if ($(".lookimg[ISUP=1]").length == $(".lookimg").length) {alert("图⽚已全部上传完毕！");return;}//循环所有已存在的图⽚对象，准备上传for (var i = 0; i < $(".lookimg").length; i++) {var NOWLOOK = $(".lookimg").eq(i);//当前操作的图⽚预览对象NOWLOOK.index = i;//如果当前图⽚已经上传，则不再重复上传if (NOWLOOK.attr("ISUP") == "1")continue;//上传图⽚准备var IMG_BASE = NOWLOOK.children("img").eq(0).attr("src"); //要上传的图⽚的base64编码var IMG_IND = NOWLOOK.attr("num");var IMG_ROUTE = $(".imgfile[num=" + IMG_IND + "]").eq(0).val();//获取上传图⽚路径，为获取图⽚类型使⽤var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图⽚类型var IMG_FOMATE = "jpeg"; //图⽚类型***if (IMG_ENDFOUR.trim() == ".jpg")IMG_FOMATE = "jpg";else if (IMG_ENDFOUR.trim() == ".png")IMG_FOMATE = "png";//图⽚正式开始上传$.ajax({type: "POST",url: IMG_AJAXPATH,data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE, 'lookIndex': NOWLOOK.index },//图⽚base64编码，图⽚格式（当前仅⽀持jpg,png,jpeg三种），图⽚对象索引 dataType: "json",success: function (data) {if (data.isok == "1") {//图⽚上传成功回调var UPTIME = Math.ceil(Math.random() * 400) + 400;//⽣成⼀个400-800的随机数，假设进图条加载时间不⼀致$(".lookimg").eq([data.ind]).attr("ISUP", "1");//记录此图⽚已经上传$(".lookimg").eq([data.ind]).children(".lookimg_progress").eq(0).children("div").eq(0).animate({ width: "100%" }, UPTIME, function () {$(this).css("background-color", "#00FF00").text('上传成功');});}else {//图⽚未上传成功回调$(".lookimg")[data.ind].children(".lookimg_progress").eq(0).children("div").eq(0).css("width", "100%").css("background-color", "red").text("上传失败");}},error: function (err) {//服务器连接失败报错处理alert("error");//alert(err.responseText);},beforeSend: function () {//图⽚上传之前执⾏的操作，当前为进度条显⽰NOWLOOK.children(".lookimg_progress").eq(0).css("display", "block");//进度条显⽰}});}});</script>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。