ajaxFileUpload.js 上传 图片

<input type="file id=“file1” name=“file” οnchange="ajaxFileUpload(“要上传图片的区域”)” />

function ajaxFileUpload() {

$.ajaxFileUpload({

url: apiHost + ‘/uploadfilestreamios.aspx?Filepath=1.png&IsFLM=false&UserCode=1&ExName=png’, //用于文件上传的服务器端请求地址

secureuri: false, //是否需要安全协议，一般设置为false

fileElementId: ‘file1’, //文件上传域的ID

dataType: ‘text’, //返回值类型 一般设置为json

success: function(data, status) //服务器成功响应处理函数

{

var str = eval("(" + data.split("}")[0] + "}" + ")");if(str.Success == "1") {var _imgUrl = str.URL;/* $(".simditor-body").html($(".simditor-body").html() + "<p><img id='woyu' class='myimg' src='" + _imgUrl + "' style='max-width:800px;height:auto;'/></p>"); //把图片添加到文本域中// _editor.sync(); //将编辑器的正文内容同步到 textarea 元素的 val 属性，返回值为编辑器正文的 HTML 内容。$("#mmb").css("display","none");alert("成功啦") */if($(".simditor-body .child_text").first().text()==""){$(".simditor-body .child_text").first().remove();}var _imgUrl = str.URL;var isMyImg="<img style='width:265px;margin-left: 5px;cursor: pointer;' onclick='window.open(\"" + _imgUrl + "\")' src=" + _imgUrl + " />";if($(".simditor-body .miniu:last").find("img").length>2||$(".simditor-body .miniu:last").find("img").length==0){$(".simditor-body ").append('<p class="miniu">'+isMyImg+'</p>');}else{$(".simditor-body").find(".miniu:last").append(isMyImg);}}},error: function(data, status, e) //服务器响应失败处理函数{alert(e);}});return false;}

如下是ajaxFileUpload.js

jQuery.extend({

createUploadIframe: function(id, uri){//create framevar frameId = 'jUploadFrame' + id;if(window.ActiveXObject) {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){//create formvar formId = 'jUploadForm' + id;var fileId = 'jUploadFile' + id;var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');var oldElement = $('#' + fileElementId);var newElement = $(oldElement).clone();$(oldElement).attr('id', fileId);$(oldElement).before(newElement);$(oldElement).appendTo(form);//set attributes$(form).css('position', 'absolute');$(form).css('top', '-1200px');$(form).css('left', '-1200px');$(form).appendTo('body');return form;},addOtherRequestsToForm: function(form,data){// add extra parametervar originalElement = $('<input type="hidden" name="" value="">');for (var key in data) {name = key;value = data[key];var cloneElement = originalElement.clone();cloneElement.attr({'name':name,'value':value});$(cloneElement).appendTo(form);}return form;},ajaxFileUpload: function(s) {// TODO introduce global settings, allowing the client to modify them for all requests, not only timeouts = jQuery.extend({}, jQuery.ajaxSettings, s);var id = new Date().getTime()var form = jQuery.createUploadForm(id, s.fileElementId);if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);var io = jQuery.createUploadIframe(id, s.secureuri);var frameId = 'jUploadFrame' + id;var formId = 'jUploadForm' + id;// Watch for a new set of requestsif ( s.global && ! jQuery.active++ ){jQuery.event.trigger( "ajaxStart" );}var requestDone = false;// Create the request objectvar xml = {}if ( s.global )jQuery.event.trigger("ajaxSend", [xml, s]);// Wait for a response to come backvar uploadCallback = function(isTimeout){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 notmodifiedif ( status != "error" ){// process the data (runs the xml through httpData regardless of callback)var data = jQuery.uploadHttpData( xml, s.dataType );// If a local callback was specified, fire it and pass it the dataif ( s.success )s.success( data, status );// Fire the global callbackif( s.global )jQuery.event.trigger( "ajaxSuccess", [xml, s] );} elsejQuery.handleError(s, xml, status);} catch(e){status = "error";jQuery.handleError(s, xml, status, e);}// The request was completedif( s.global )jQuery.event.trigger( "ajaxComplete", [xml, s] );// Handle the global AJAX counterif ( s.global && ! --jQuery.active )jQuery.event.trigger( "ajaxStop" );// Process resultif ( plete )plete(xml, status);jQuery(io).unbind()setTimeout(function(){try{$(io).remove();$(form).remove();} catch(e){jQuery.handleError(s, xml, null, e);}}, 100)xml = null}}// Timeout checkerif ( s.timeout > 0 ){setTimeout(function(){// Check to see if the request is still happeningif( !requestDone ) uploadCallback( "timeout" );}, s.timeout);}try{// var io = $('#' + frameId);var form = $('#' + formId);$(form).attr('action', s.url);$(form).attr('method', 'POST');$(form).attr('target', frameId);if(form.encoding){form.encoding = 'multipart/form-data';}else{form.enctype = 'multipart/form-data';}$(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;// If the type is "script", eval it in global contextif ( type == "script" )jQuery.globalEval( data );// Get the JavaScript object, if JSON is used.if ( type == "json" ){// If you add mimetype in your response,// you have to delete the '<pre></pre>' tag.// The pre tag in Chrome has attribute, so have to use regex to removevar data = r.responseText;var rx = new RegExp("<pre.*?>(.*?)</pre>","i");var am = rx.exec(data);//this is the desired data extractedvar data = (am) ? am[1] : ""; //the only submatch or emptyeval( "data = " + data );}// evaluate scripts within htmlif ( type == "html" )jQuery("<div>").html(data).evalScripts();//alert($('param', data).each(function(){alert($(this).attr('value'));}));return data;},handleError: function( s, xhr, status, e ){ // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }

})