加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

利用ajaxfileupload插件异步上传文件

发布时间:2020-12-16 01:45:13 所属栏目:百科 来源:网络整理
导读: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=

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);
$filename=time().$filename;
move_uploaded_file($_FILES["{$img}"]["tmp_name"],$path."./"."upload/".$filename);//将临时文件转移到目标目录
$filename=iconv("gb2312","utf-8",$filename);
$insertpath="./"."upload/".$filename;
echo $insertpath;


插件内容

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",s]);}else
jQuery.handleError(s,status);}catch(e)
{status="error";jQuery.handleError(s,status,e);}
if(s.global)
jQuery.event.trigger("ajaxComplete",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,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,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;}})

保存为ajaxfileupload.min.js

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读