利用ajaxfileupload插件异步上传文件
HTML文件
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./ajaxfileupload.min.js"></script>
</head>
<body>
<p>上传***</p>
<input type="file" name="upfile" id="upfile1">
<input type='submit' value="上传" class="btn">
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(e){
e.preventDefault();
var img=$("input[name=upfile]").attr("name");
var fileId = $("input[name=upfile]").attr("id");
var data={img:img};
$.ajaxFileUpload({
url:'file.php', //将数据提交到的文件
data:data,//要传递的数据
secureuri:false,
fileElementId:fileId, //通过id上传文件上面的
dataType: 'text',//这里指定返回值的类型
success:function(msg){
alert(msg)
}
})
})
})
</script>
</html>
php文件
<?php
$img=$_POST['img'];
$filename=$_FILES["{$img}"]["name"];
$path=$_SERVER['DOCUMENT_ROOT'];
$filename=iconv("utf-8","gb2312", $filename);//为了防止出现乱码对文件名进行编码
$type=strstr($filename,'.');//获取后缀，如果需要后缀的几位可以再使用substr处理一下。
$filename=time().$type;
move_uploaded_file($_FILES["{$img}"]["tmp_name"],$path."./"."upload/".$filename);//将临时文件转移到目标目录
$filename=iconv("gb2312","utf-8", $filename);
$insertpath="./"."upload/".$filename;
echo $insertpath;
将下面的内容保存为ajaxfileupload.min.js
jQuery.extend({createUploadIframe:function(id,uri)
{var 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)
{var 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);$(form).css('position','absolute');$(form).css('top','-1200px');$(form).css('left','-1200px');$(form).appendTo('body');return form;},addOtherRequestsToForm:function(form,data)
{var 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){s=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;if(s.global&&!jQuery.active++)
{jQuery.event.trigger("ajaxStart");}
var requestDone=false;var xml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);var 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";if(status!="error")
{var data=jQuery.uploadHttpData(xml,s.dataType);if(s.success)
s.success(data,status);if(s.global)
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)
jQuery.event.trigger("ajaxComplete",[xml,s]);if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");if(s.complete)
s.complete(xml,status);jQuery(io).unbind()
setTimeout(function()
{try
{$(io).remove();$(form).remove();}catch(e)
{jQuery.handleError(s,xml,null,e);}},100)
xml=null}}
if(s.timeout>0)
{setTimeout(function(){if(!requestDone)uploadCallback("timeout");},s.timeout);}
try
{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(type=="script")
jQuery.globalEval(data);if(type=="json")
eval("data = "+data);if(type=="html")
jQuery("<div>").html(data).evalScripts();return data;}})