ajaxFileUpload 上传文件/图片,传参数,解决第二次无法上传问题
2017-01-06 12:08
776 查看
html:
Javascript:
var count = 1;
function ajaxFileUpload(id){
count++;
//图片格式验证
var x = $('#'+id);
if (!x || !x.val()) return;
var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
if (!patn.test(x.val())) {
alert("您选择的不是图片");
x.val() = "";
return;
}
$.ajaxFileUpload({
url: "upload.php",//上传的url,自己设置
type: 'post',
secureuri: false, //一般设置为false
fileElementId: id, // 上传文件的id、name属性名
dataType: 'text', //返回值类型,一般设置为json、application/json
data: {'userfile':id,'time':new Date().getTime()},//传参
success: function (data, status) {
data = data.replace(/<.*?>/g,'');
var obj = eval('(' + data + ')');
if(obj.url == ''){
alert(obj.msg);
return;
}
$('#userfile').attr('title',count);
},
error: function (data, status, e) {
//alert('[未知错误]'+e);
$('#userfile').attr('title',count);
}
});
//return false;
}
* 加上 $('#userfile').attr('title',count); 这句,解决第二次上传同一个文件名的文件没有反应的问题。
ajaxfileupload.js(下载:http://download.csdn.net/download/macwhirr123/9730450)
<script charset="utf-8" src="js/ajaxfileupload.js"></script> <input style="display:;" type="file" id="userfile" onchange="ajaxFileUpload('userfile')" value="" name="userfile" />
Javascript:
var count = 1;
function ajaxFileUpload(id){
count++;
//图片格式验证
var x = $('#'+id);
if (!x || !x.val()) return;
var patn = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
if (!patn.test(x.val())) {
alert("您选择的不是图片");
x.val() = "";
return;
}
$.ajaxFileUpload({
url: "upload.php",//上传的url,自己设置
type: 'post',
secureuri: false, //一般设置为false
fileElementId: id, // 上传文件的id、name属性名
dataType: 'text', //返回值类型,一般设置为json、application/json
data: {'userfile':id,'time':new Date().getTime()},//传参
success: function (data, status) {
data = data.replace(/<.*?>/g,'');
var obj = eval('(' + data + ')');
if(obj.url == ''){
alert(obj.msg);
return;
}
$('#userfile').attr('title',count);
},
error: function (data, status, e) {
//alert('[未知错误]'+e);
$('#userfile').attr('title',count);
}
});
//return false;
}
* 加上 $('#userfile').attr('title',count); 这句,解决第二次上传同一个文件名的文件没有反应的问题。
ajaxfileupload.js(下载:http://download.csdn.net/download/macwhirr123/9730450)
// JavaScript Document jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { if(jQuery.browser.version=="9.0") { io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } else if(jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"||jQuery.browser.version=="8.0") { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } } else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io; }, createUploadForm: function(id, fileElementId,data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); /* var oldElement = jQuery('#' + fileElementId); var newElement = oldElement.clone(true); newElement[0].files=oldElement[0].files; oldElement.attr('id', fileId); oldElement.before(newElement); oldElement.appendTo(form);*/ //增加文本参数的支持 if (data) { for (var i in data) { $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; }, ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = s.fileElementId; var form = jQuery.createUploadForm(id, s.fileElementId,s.data); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = 'jUploadFrame' + id; var formId = 'jUploadForm' + id; if( s.global && ! jQuery.active++ ) { // Watch for a new set of requests jQuery.event.trigger( "ajaxStart" ); } var requestDone = false; // Create the request object var xml = {}; if( s.global ) { jQuery.event.trigger("ajaxSend", [xml, s]); } var uploadCallback = function(isTimeout) { // Wait for a response to come back var io = document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }else if(io.contentDocument) { xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s, xml, null, e); } if( xml || isTimeout == "timeout") { requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; // Make sure that the request was successful or notmodified if( status != "error" ) { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData( xml, s.dataType ); if( s.success ) { // ifa local callback was specified, fire it and pass it the data s.success( data, status ); }; if( s.global ) { // Fire the global callback jQuery.event.trigger( "ajaxSuccess", [xml, s] ); }; } else { jQuery.handleError(s, xml, status); } } catch(e) { status = "error"; jQuery.handleError(s, xml, status, e); }; if( s.global ) { // The request was completed jQuery.event.trigger( "ajaxComplete", [xml, s] ); }; // Handle the global AJAX counter if(s.global && ! --jQuery.active) { jQuery.event.trigger("ajaxStop"); }; if(s.complete) { s.complete(xml, status); } ; jQuery(io).unbind(); setTimeout(function() { try { jQuery(io).remove(); jQuery(form).remove(); } catch(e) { jQuery.handleError(s, xml, null, e); } }, 100); xml = null; }; } // Timeout checker if( s.timeout > 0 ) { setTimeout(function(){ if( !requestDone ) { // Check to see ifthe request is still happening uploadCallback( "timeout" ); } }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if(form.encoding) { form.encoding = 'multipart/form-data'; } else { form.enctype = 'multipart/form-data'; } jQuery(form).submit(); } catch(e) { jQuery.handleError(s, xml, null, e); } if(window.attachEvent){ document.getElementById(frameId).attachEvent('onload', uploadCallback); } else{ document.getElementById(frameId).addEventListener('load', uploadCallback, false); } return {abort: function () {}}; }, uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // ifthe type is "script", eval it in global context if( type == "script" ) { jQuery.globalEval( data ); } // Get the JavaScript object, ifJSON is used. if( type == "json" ) { eval( "data = " + data ); } // evaluate scripts within html if( type == "html" ) { jQuery("<div>").html(data).evalScripts(); } return data; } , handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } });
相关文章推荐
- 解决网页异步上传图片时不断更换预览图片时数据库累积文件问题与ajaxUploadFile上传多个参数问题
- ajaxfileupload文件上传插件,解决再次提交文件流置空的问题
- commons fileupload 文件上传乱码问题解决方案 + request.getParameter无法得到参数问题
- ajaxfileupload 能上传图片不能上传其他文件的解决方法
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- ajaxfileupload_v.js 解决js版本不兼容,多文件上传不解析json的问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- spring mvc 下使用ajaxfileupload.js 异步上传文件 并返回信息 各种问题解决
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- ajax图片上传及时回显图片,自己总结 + ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
- 解决ajaxfileupload二次上传文件问题
- SpringMVC+ajaxFileUpload上传图片 IE浏览器弹下载框问题解决方案
- 解决在Safari、IE高版本中采用自定义选择文件按钮ajaxFileUpload不能上传问题
- SpringMVC+ajaxFileUpload上传图片 IE浏览器弹下载框问题解决方式
- ajaxFileupload.js修复上传无法携带参数,返回json格式不准确问题
- 最近使用ajaxFileUpload和Jcrop来实现图片上传和截图,出现一个图片无法更换的问题
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
- SpringMVC+ajaxFileUpload上传图片 IE浏览器弹下载框问题解决方案
- 异常-----springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)