当前位置:首页 » 文件传输 » jquery大文件上传控件
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

jquery大文件上传控件

发布时间: 2022-06-11 16:31:40

Ⅰ 想用jquery ui组件做一个文件上传的功能,但是其中涉及到的是跨域的问题,肿么办

不用jquery-ui,引入jquery后,再引入TableSort插件即可,使用非常简单.

Ⅱ jquery上传控件uploadify有没有办法控制多文件上传时的上传顺序

猛的一下没看太懂你的意思, jquery uploadify可以限制文件上传的个数,文件的大小,但对宽高没有限制,你需要自己去设置判断;如果是图片的话

Ⅲ jquery 多个 上传文件教程

jquery 实现多个上传文件教程:

首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):

jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css

1、页面的基本代码如下

这里用的是aspx页面(html也是也可的)

页面中引入的js和js函数如下:

<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>

</script>

js函数:

<scripttype="text/javascript">
$(document).ready(function(){

$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框
'script':'Handler1.ashx',//script:后台处理程序的相对路径
'cancelImg':'image/cancel.png',
'buttenText':'请选择文件',//浏览按钮的文本,默认值:BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder':'Uploader',//上传文件存放的目录
'queueID':'fileQueue',//文件队列的ID,该ID与存放文件队列的div的ID一致
'queueSizeLimit':120,//上传文件个数限制
'progressData':'speed',//上传速度显示
'auto':false,//是否自动上传
'multi':true,//是否多文件上传
//'onSelect':function(e,queueId,fileObj){
//alert("唯一标识:"+queueId+" "+
//"文件名:"+fileObj.name+" "+
//"文件大小:"+fileObj.size+" "+
//"创建时间:"+fileObj.creationDate+" "+
//"最后修改时间:"+fileObj.modificationDate+" "+
//"文件类型:"+fileObj.type);

//}
'onQueueComplete':function(queueData){
alert("文件上传成功!");
return;
}

});
});

页面中的控件代码:

<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>

函数主要参数:

$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多讲了
'script':'/AjaxByJQuery/file.do',//处理Action
'cancelImg':'cancel.png',
'folder':'',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls;*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器详解见文档
'onComplete':function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData);
}
});
});

后台一般处理文件:

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要说明
///</summary>
publicclassHandler1:IHttpHandler
{

publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";

HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问

stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径

if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//创建服务端文件夹
}

file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上传成功");
}

else
{
context.Response.Write("0");
}

}

publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}

以上方式基本可以实现多文件的上传,大文件大小是在控制在10M以下/。

Ⅳ jquery uploadify 上传控件 上传多个文件(4个以上)或者上传大文件的时候为什么会报http错误,高手进。。

这里有一个无刷新多文件上传系统
里面可以判断文件多少 文件类型
里面有教程和源码

Ⅳ 使用jquery的uploadify,无法显示文件上传控件,请帮忙看是什么原因

<divid="fileQueue"></div>你加上这个

<p>

<inputtype="file"id="uploadify"name="uploadify"/>

</p>

用火狐的话,那个Browse的好像显示不出来。

你能不能贴张图。

Ⅵ DWZ中怎样整合JQuery的ajaxFileUpload上传插件

jQuery插件AjaxFileUpload可以实现ajax文件上传,需要jQuery库文件和ajaxfileupload.js
一.引入部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>

二.<body>部分

<img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
<input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>

注意:使用AjaxFileUpload插件上传文件可不需要form

<form name="form" action="" method="POST" enctype="multipart/form-data">

……相关html代码……

</form>

三.js部分

function changImg(){

$.ajaxFileUpload
(
{
url:'XXX.action', //上传文件的服务端
secureuri:false, //是否启用安全提交
dataType: 'text', //数据类型
fileElementId:'touxiang', //表示文件域ID

//提交成功后处理函数 html为返回值,status为执行的状态
success: function(html,status)
{

},

//提交失败处理函数
error: function (html,status,e)
{

}
}
)

}

四.原理

利用jQuery的选择器获得file文件上传框中的文件路径值,然后动态的创建一个iframe,并在里面建立一个新的file 文件框,提供post方式提交到后台。最后,返回结果到前台。

五.总结

使用jQuery插件AjaxFileUpload实现无刷新上传文件非常实用,由于其简单易用,因些这个插件相比其它文件上传插件使用人数最多,非常值得推荐。

Ⅶ 有哪些好用的 jQuery 图片上传插件

1、uploadify
它是针对jQuery的免费文件上传插件,可以轻松将单个或多个文件上传到网站上,可控制并发上传的文件数,通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。

2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具,安装简便,服务器独立,由MooTools模块驱动,可以在任何现代浏览器上使用。

3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小,不限格式的文件/图片批量上传工具,是收费控件。它支持云端存储和客户端文件处理,支持断点续传,稳定可靠。从8.0.8开始,Image Uploader将名称改为"Aurigma Upload Suite"。

Ⅷ 怎么样通过jQuery Ajax实现上传文件

Query Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式。
FormData对象
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求
XMLHttpRequest方式
xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);

其实jquery的ajax也可以支持到的,关键是设置:processData 和 contentType 。
ajax方式

var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行,请稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
},
error : function(responseStr) {
console.log("error");
}
});

Ⅸ jQuery fileupload 多文件上传

//js
$(function(){
//文件上传地址
//varurl='http://localhost/index.php/upload/do_upload';
varurl='http://localhost/index.php/uploadwe';
//初始化,主要是设置上传参数,以及事件处理方法(回调函数)
$('#fileupload').fileupload({
autoUpload:true,//是否自动上传
//url:url,//上传地址
dataType:'json',
done:function(e,data){//设置文件上传完毕事件的回调函数
//$.each(data.result.files,function(index,file){
$("#myimg").attr({src:data.result.imgurl});
$("#myimg").css({width:"290px",height:"218px"});
//alert(data.result);
},
progressall:function(e,data){//设置上传进度事件的回调函数
varprogress=parseInt(data.loaded/data.total*5,10);
$('#progress.bar').css(
'width',
progress+'%'
);
}
});
});
//上传至服务后,服务器返回json数据--上传图片的地址。
//html
<labelfor="text">上传图片</label>
<inputid="fileupload"type="file"name="files"data-url="<spanstyle="color:#ff6666;">jquery_save_img</span>"multiple>
//data-url为上传至服务器端的处理接口/地址,可替换js中的url
//服务器端
functionjquery_save_img()
{
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');
$max_size='500000000000';//最大文件限制(单位:byte)
$upfile='./uploads';//图片目录路径
$file=$_FILES['files'];

/*
echo'filename:'.$file['tmp_name'].';<br/>';
echo'size:'.$file['size'].';<br/>';
echo'type:'.$file['type'].';<br/>';
echo'name:'.$file['name'].';<br/>';
*/

if($_SERVER['REQUEST_METHOD']=='POST'){//判断提交方式是否为POST
if(!is_uploaded_file($file['tmp_name'])){//判断上传文件是否存在
echo"<fontcolor='#FF0000'>文件不存在!</font>";
exit;
}

if($file['size']>$max_size){//判断文件大小是否大于500000字节
echo"<fontcolor='#FF0000'>上传文件太大!</font>";
exit;
}
if(!in_array($file['type'],$arrType)){//判断图片文件的格式
echo"<fontcolor='#FF0000'>上传文件格式不对!</font>xxx:".$file['type'];
exit;
}
if(!file_exists($upfile)){//判断存放文件目录是否存在
mkdir($upfile,0777,true);
}
$imageSize=getimagesize($file['tmp_name']);
$img=$imageSize[0].'*'.$imageSize[1];
$fname=$file['name'];
$ftype=explode('.',$fname);
$picName=$upfile."/cloudy".$fname;

if(file_exists($picName)){
//echo"<fontcolor='#FF0000'>同文件名已存在!</font>";
//exit;
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo"<fontcolor='#FF0000'>移动文件出错!</font>";
exit;
}
else{
/*
echo"<fontcolor='#FF0000'>图片文件上传成功!</font><br/>";
echo"<fontcolor='#0000FF'>图片大小:$img</font><br/>";
echo"图片预览:<br><divstyle='border:#F001pxsolid;width:200px;height:200px'>
<imgsrc="".$picName.""width=200pxheight=200px>".$fname."</div>";
*/
echo'{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';
}
}

}

Ⅹ 请问ASP要如何使用jquery的插件uploadify,官网上的只有PHP的

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

支持单文件或多文件上传,可控制并发上传的文件数

在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……

通过参数可配置上传文件类型及大小限制

通过参数可配置是否选择文件后自动上传

易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)

通过接口参数和CSS控制外观

更多……

相关链接

Uploadify主页地址:http://www.uploadify.com/ 在该页面你可以了解到关于他的更多内容。

Uploadify在线演示:在线Demo

Uploadify配置参数及接口文档:http://www.uploadify.com/documentation

Uploadify插件下载地址:http://www.uploadify.com/download

使用方法

下载插件安装包后,可以看到里面的几个主要文件:jquery.uploadify.js(完成上传功能的脚本文件,在调用页面引用)、uploadify.css(外观样式表)、uploader.swf(上传控件的主体文件,flash控件)、upload.php(服务器端处理文件,官方仅提供了php版的)

引用了插件文件后,在页面中做如下调用:

//声明一个普通的html文件上传控件,并指定id

<input type="file" name="fileInput" id="fileInput" />

//将声明的普通上传控件与Uploadify插件绑定

<script type="text/javascript">

$(document).ready(function() {

$('#fileInput').fileUpload ({

//以下参数均是可选

'uploader' : 'uploader.swf', //指定上传控件的主体文件,默认‘uploader.swf’

'script' : 'upload.php', //指定服务器端上传处理文件,默认‘upload.php’

'cancelImg' : 'cancel.png', //指定取消上传的图片,默认‘cancel.png’

'auto' : true, //选定文件后是否自动上传,默认false

'folder' : '/uploads' //要上传到的服务器路径,默认‘/’

'muti' : true, //是否允许同时上传多文件,默认false

'fileDesc' : 'rar文件或zip文件' //出现在上传对话框中的文件类型描述

'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc

'sizeLimit': 86400 //控制上传文件的大小,单位byte

'simUploadLimit' :5 //多文件上传时,同时上传文件数目限制

});

});

</script>

上面列出了我认为常用的配置选项,此外还有很多参数可配置,参考官方文档

通过调用相关功能函数,声明功能按钮。

例如声明上传功能按钮(自动上传时不需要):

<a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>

声明取消多文件上传时上传队列:

<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>

文章来自中国建站:http://www.jz123.cn/text/2419333.html