利用ajaxfileupload插件异步上传文件

最新推荐文章于 2021-09-01 12:14:48 发布
最新推荐文章于 2021-09-01 12:14:48 发布
阅读量434 收藏
点赞数
分类专栏： ajax jquery php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XBODHX/article/details/50484114
版权
php 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
jquery
5 篇文章 0 订阅
订阅专栏
ajax
1 篇文章 0 订阅
订阅专栏

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",[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;}})

保存为ajaxfileupload.min.js

bodh01
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajaxfileupload ajax 异步文件上传 进度条,jQuery插件ajaxFileUpload异步上传文件的使用心得...
weixin_36139471的博客
08-05 536
前言：在项目开发中用到了异步文件上传，并返回文件上传的状态，由于之前使用的是form表单进行文件的上传，不能实现该需求，所以使用了ajaxfileupload.js进行开发。有些小伙伴没有耐心看到最后，那就直接告诉你们结果吧，替换这个版本的ajaxfileupload.js就可以解决这个问题！ajaxfileupload.js下载地址(这是本人已经修改过的，可以正常解析data)：开发准备：具体使...
Java利用jQuery的ajaxFileUpload异步上传文件的几种方式
热门推荐
逍遥飞鹤的专栏
09-25 1万+
使用jQuery的ajaxFileUpload控件以ajax方式上传附件有较好的用户体验，在某SSH2项目开发中，使用了ajaxFileUpload实现了附件的上传，具体过程如下： 1、引入及修改ajaxFileUpload.js [html] view plaincopy script type="text/javascript" src
java ajaxupload 使用,$.ajaxFileUpload一样的使用方法，一个报错，一个成功
weixin_32897341的博客
03-19 155
当前位置:我的异常网» Java Web开发»$.ajaxFileUpload一样的使用方法，一个报错，一个成$.ajaxFileUpload一样的使用方法，一个报错，一个成功www.myexceptions.net网友分享于：2015-11-16浏览：0次$.ajaxFileUpload同样的使用方法，一个报错，一个成功报错页面functionajaxFileUpload1(fil...
十九、多文件上传（ajaxFileupload实现多文件上传功能）
weixin_34345560的博客
06-11 107
来源于https://www.jb51.net/article/128647.htm 打开google 搜索"ajaxFileupload' ‘多文件上传"可以搜到许许多多类似的，那我为什么还要写一下呢？一个是对之前大神的贡献表示感谢；二个是自己知识的总结；三个是自己在原有的基础上改动了下，在此记录，可能帮助其他朋友。 用过这个插件的都知道这个插件的基本用法，我就不废话，直接上代码。 我需要...
ajaxupload.js java_java jfinal + ajaxfileupload.js 上传
weixin_36388341的博客
02-22 62
功能上传需求：同时上传多张图片前端：jquery.ajaxfileupload.js后端：jfinalupload.htm上传照片//绑定6个按钮控件$(document).ready(function(){var arr = [0,1,2,3,4,5];$(arr).each(function(index,element){$("#image0").ajaxfileupload({'action...
通过ajaxFileUpload异步请求上传文件（ajaxFileUpload+servlet实现文件上传下载）
雾林小妖的博客
09-01 2358
1、最终效果 实现选择图片（此处以图片为例，支持所有类型文件的上传），选择之后将选择的图片在页面中显示出来，点击上传，可以将文件上传到指定的地址中，上传成功后在当前页面自动显示下载标签。 源码下载地址：链接：https://pan.baidu.com/s/17G63S9rkfFIfGBqwCwUHaA 提取码：52b7 2、技术结构 eclipse+servlet+ajaxFileUpload+windows 3、将文件上传下载依赖的包及js文...
Jquery中"$(document).ready(function(){ })"函数的使用详解
weixin_33966365的博客
11-05 488
Jquery是优秀的Javascrīpt框架,$是jquery库的申明，它很不稳定（我就常遇上）,换一种稳定的写法jQuery.noConflict(); jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧，就是它了)的操作. 比如jquery写法： 1 $(...
jQuery 事件 - ready() 方法
weixin_30352191的博客
11-25 196
在文档加载后激活函数：$(document).ready(function(){ $(".btn1").click(function(){ $("p").slideToggle(); }); });亲自试一试定义和用法当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和...
使用ajaxfileupload.js实现上传文件功能
菜鸟程序员成长路
06-08 8816
转载：一、ajaxFileUpload是一个异步上传文件的jQuery插件。语法：$.ajaxFileUpload([options])options参数说明：1、url　　　　　　　　　　 上传处理程序地址2、fileElementId　　　　　  文件选择框的id属性，即&lt;input type="file"&gt;的id3、secureuri　　　　　　　 是否启用安全提交，默认为fal...
jquery回车键获取input框焦点
XBODHX的专栏
01-05 2626
//document.onkeyup=function(){alert(event.keyCode)}//使用js获取按下的键值 $(document).keydown(function(e){//使用jquery获取按下的键值     alert(e.keyCode); }) //按下tab键获取input焦点     $("input[name=pwd]").
使用jquery匹配正浮点数
XBODHX的专栏
12-23 1814
Examples     var tes = $(".text3-2-text"); var btn = $(".text3-2-submit"); btn.click(function() { var input = parseFloat(tes.val()); tes.val(i
jquery获取select选中的值
XBODHX的专栏
09-09 939
HTML代码： select获取值 --select-- Volvo Saab Opel Audi js代码： $(function(){ $(document).on("change","select[name=option]",function(){ var optval=$("select[name=option]").
jquery获取radio选中的值
XBODHX的专栏
09-09 545
HTML代码： select获取值 学生  学生1  学生2 js代码： $(function(){ $(document).on("click",".student",function(){ var radio=$('input[name=student]:checked').val(); alert(radio); }
四台服务器分别部署组件内容.md
最新发布
07-24
四台服务器分别部署组件内容.md
GitHub Issue 模板：提升团队协作效率的秘籍
07-24
GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。GitHub提供了分布式版本控制和源代码管理（SCM）功能，此外还有一些特色功能，例如允许用户对项目进行跟踪、协调工作、管理任务和代码审查。 ### GitHub的主要特点包括： 1. **版本控制**：GitHub基于Git，一个分布式版本控制系统，可以跟踪代码的每一次更改。 2. **协作**：GitHub提供了多种工具来支持多人协作，包括分支管理、合并请求（Pull Request）、代码审查等。 3. **社区**：GitHub拥有庞大的开发者社区，用户可以探索其他项目，贡献代码，或者获取灵感。 4. **文档**：通过README文件和Wiki页面，项目可以拥有详细的文档说明。 5. **问题跟踪**：GitHub提供了问题跟踪系统，方便项目成员报告问题、讨论解决方案。 6. **Gist**：一种简单分享代码片段的方式。 7. **GitHub Actions**：自动化工作流程，可以自动运行测试、部署代码等。 8. **GitHub Pag
Day2-数据类型、常量、变量及运算符代码案例
07-24
Day2-数据类型、常量、变量及运算符代码案例
uart_top.v
07-24
uart_top
java程序设计—JAVA泡泡堂网络游戏的设计与实现(源代码+论文)49.rar
07-24
java程序设计，可供正在学习的同学研究参考。
ajaxfileupload上传大文件
06-10
为了上传大文件，可以使用 jQuery 的 ajaxfileupload 插件来实现。 ajaxfileupload 插件可以通过将文件切割成小块，分多次上传来实现上传大文件的功能。具体实现过程如下： 1. 引入 ajaxfileupload 插件的 js 文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值