php ajaxfileupload,ajaxfileupload异步上传图片

使用的时候记得引用ajaxfileupload.js和 jquery-3.0.0.min.j两个js文件，ajaxfileupload.js请使用我下面附上的代码，其中它加了个扩展，可传递额外参数

upload.html

ajaxfileuploadͼƬʏԫ࠘ݾ

$(function(){

$("#buttonUpload").click(function(){

$.ajaxFileUpload({

url:'upload.php',

secureuri :false,

fileElementId :'fileToUpload',

dataType : 'json',

data:{name:'yilian'},

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;

});

$("#fileToUpload").change(function(){

// getObjectURL是自定义的函数，见下面

// this.files[0]代表的是选择的文件资源的第一个，因为上面写了 multiple="multiple" 就表示上传文件可能不止一个

// ，但是这里只读取第一个

alert('multiple');

var objUrl = getObjectURL(this.files[0]) ;

// 这句代码没什么作用，删掉也可以

// console.log("objUrl = "+objUrl) ;

if (objUrl) {

// 在这里修改图片的地址属性

$("#img0").attr("src", objUrl) ;

}

})

});

function getObjectURL(file) {

var url = null ;

// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

保存

upload.php

$res["error"] = "";//错误信息

$res["msg"] = "";//提示信息

if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'],"c:\\test.jpg")){

$res["msg"] = "ok";

}else{

$res["error"] = "error";

}

file_put_contents('data.txt',json_encode($_FILES),FILE_APPEND);

echo json_encode($res);

?>

下面这个是ajaxfileupload插件代码，里面有对它原先代码进行了扩展，也可传递参数到后端

ajaxfileupload.js

// JavaScript Document

jQuery.extend({

createUploadIframe: function(id, uri)

{

//create frame

var frameId = 'jUploadFrame' + id;

if(window.ActiveXObject) {

var io = document.createElement('');

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 form

var formId = 'jUploadForm' + id;

var fileId = 'jUploadFile' + id;

var form = jQuery('

');

var oldElement = jQuery('#' + fileElementId);

var newElement = jQuery(oldElement).clone();

jQuery(oldElement).attr('id', fileId);

jQuery(oldElement).before(newElement);

jQuery(oldElement).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;

},

addOtherRequestsToForm: function(form,data)

{

// add extra parameter

var originalElement = $('');

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 timeout

s = jQuery.extend({}, jQuery.ajaxSettings, s);

var id = s.fileElementId;

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;

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("

").html(data).evalScripts();

}

return data;

}

});