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

jquery上传插件

发布时间: 2022-03-30 23:40:29

A. 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实现无刷新上传文件非常实用,由于其简单易用,因些这个插件相比其它文件上传插件使用人数最多,非常值得推荐。

B. 求一款jQuery或js多图上传插件

多图上传没问题,但是想上传后可以删除,可以修改名称。这个只能你自己来实现。之前专门写了一个上传插件希望能帮到你

http://blog.csdn.net/sq111433/article/details/16872403

C. jquery-file-upload插件的问题。修改data。

jquery异步上传,一般来说这里上传调用的是系统专门上传的action,上传好后返回上传文件信息。你这里result.files就是返回的上传结果。这个需要你在后台自己封装。你前端需要什么,后台就封装什么。

比如我以前写过一个

Map<String,Object>fileObject=newHashMap<String,Object>();
fileinfo.put("size",size);//原始文件大小
fileObject.put("original",original);//原始文件唯一标识
fileObject.put("originalPath",originalPath);//原始文件临时存储目录
fileObject.put("thumb",thumb);//图片的预览文件唯一标识
fileObject.put("thumbPath",thumbPath);//图片预览文件临时存储目录
fileObject.put("name",fileFileName);//原始图片名称
fileObject.put("url",url);//原始图片的web查看地址,这个可以设置img.src属性
fileObject.put("thumbnailUrl",thumbnailUrl);//预览图片的web查看地址
fileObject.put("contentType",fileContentType);//上传文件type
fileObject.put("deleteType","POST");//这是我自己封装的post删除
//这个是我自己封装的删除路径
fileObject.put("deleteUrl",super.getRequest().getContextPath()+"/removeUpload.do?id="+original);
Map[]fileArray=newHashMap[1];
fileArray[0]=fileObject;
JSONObjectjsonObject=newJSONObject();
jsonObject.put("files",JSONArray.fromObject(fileArray));
HttpServletResponseresponse=getResponse();
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(jsonObject.toString());
response.getWriter().flush();

而前断可以将上传文件的唯一标识放到一个隐藏域里,表单提交的时候一起提发送到后台,再根据唯一标识去取上传文件信息或写或复制转移。

前断fileuploaddone我是这么用的

on('fileuploaddone',function(e,data){
//上传结果
$.each(data.result.files,function(index,file){
if(file.url){
varlink=$('<a>').attr('target','_blank').prop('href',file.url);
//这个是文件上传后的展示区域,可以在fileuploadadd事件里构建
var$imgdiv=$(data.context.children()[index]);
var$link=$imgdiv.find("canvas").wrap(link);
$imgdiv.append($('<inputtype="hidden"name="imagefileid"/>').prop('value',file.original));
$imgdiv.append($('<inputtype="hidden"name="imagefilename"/>').prop('value',file.name));
}elseif(file.error){
varerror=$('<spanclass="text-danger"/>').text(file.error);
$(data.context.children()[index]).append(error);
}
});
})

D. 谁有jquery的上传插件ajaxupload.3.5.js文件,传到[email protected],谢谢

<script type="text/javascript" src="<?php echo UPLOAD; ?>/js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="<?php echo UPLOAD; ?>/styles.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#upload1');
var status=$('#status1');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image1.php',
name: 'image1',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('仅支持: JPG, PNG 或 GIF 格式');
return false;
}
status.text('上传中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files1').html('<img src="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" alt="" /><br /> <input type="text" name="image1" value="<?php echo UPLOAD; ?>/uploads/image/small_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files1').text('建议图片尺寸 : 宽=80px,高=80px ').addClass('error');
} else{
$('<li></li>').appendTo('#files1').text(file).addClass('error');
}
}
});

var btnUpload=$('#upload2');
var status=$('#status2');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-image2.php',
name: 'image2',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('仅支持: JPG, PNG 或 GIF 格式');
return false;
}
status.text('上传中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files2').html('<img src="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" alt="" /><br /> <input type="text" name="image2" value="<?php echo UPLOAD; ?>/uploads/image/large_image/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files2').text('正确的图片尺寸是 : 宽=640px,高=358px ').addClass('error');
} else{
$('<li></li>').appendTo('#files2').text(file).addClass('error');
}
}
});

var btnUpload=$('#upload3');
var status=$('#status3');
new AjaxUpload(btnUpload, {
action: '<?php echo UPLOAD; ?>/upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(zip)$/.test(ext))){
// extension is not allowed
status.html('<div class="error">仅支持zip格式</div>');
return false;
}
status.text('上传中...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files3').html('<img src="<?php bloginfo('template_url'); ?>/images/icon_zipbox_128.png" alt="" /><br /> <input type="text" name="download_file" value="<?php echo UPLOAD; ?>/uploads/file/'+file+'" id="some_name">').addClass('success');
}else if(response==="size_error"){
$('<li></li>').appendTo('#files3').text('上传文件不应大于 10MB. ').addClass('error');
} else{
$('<li></li>').appendTo('#files3').text(file).addClass('error');
}
}
});
});

$(function(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();

// call ajax
$("#sub_cat").empty();
$.ajax({
url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,

success:function(results)
{
// alert(results);
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
</script>

E. jquery uploadify插件怎样实现上传文件成功后 隐藏上传上传按钮

可以在上传完成的回调函数中,隐藏上传按钮。

F. jquery 除了上传插件Uploadify以外有没有别的上传插件,这个插件是选择文件就直接上传了

Uploadify有个方法可以设置,下面这样设置,就不会直接上传了
uploadifySettings('auto', false)

你加个按钮,执行js:
$('#uploadify').uploadifyUpload();//开始上传

G. jquery上传文件是怎么实现的

本篇文章是对Jquery中的LigerUI实现文件上传的方法,进行了分析介绍,需要的朋友可以参考下
一、在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
二、Html中的Div代码

复制代码 代码如下:
<div id="AppendBill_Div" style="display:none;"> <%-- 上传 - 单 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
图标:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
</div>

三、Js中-写的是关键部分,会LigerUI的朋友-你懂得
1、grid中添加项【存地址字段】
{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath1", type: "hidden" }, // --上传-【5】--
{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上传-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【扫描件】 // --上传-【7】--
3、事件
// #region ======================================= 【上传扫描件窗口】 // --上传-【8】--
复制代码 代码如下:
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 单号
if (imageurl.length == 0) {
LG.showError("您没有输入单号,请输入随单号!");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}
else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加图标',
width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小
buttons: [
{ text: '上传', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
function AppendBillPath_save()
{
var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();
var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{
LG.showError("请上传jpg,jpep,png,gif,bmp格式的图片文件");
return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);
$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上传-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路径
// $("#AppendBillPath2").val(Data);

LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion

四、后台cs,写一句关键的,可以返回参数,前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 执行上传操作

H. jquery 上传文件插件uploadify jsp版本

写一个servlet,看这里
http://www.javaeye.com/topic/376101

I. jQuery实现文件上传。

/*jQuery实现文件上传,参考例子如下:
packagecom.kinth.hddpt.file.action;

importjava.io.File;
importjava.io.FileNotFoundException;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importjava.util.ArrayList;
importjava.util.Calendar;
importjava.util.Enumeration;
importjava.util.Hashtable;
importjava.util.List;

importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;

importnet.sf.json.JSONArray;

importorg.apache.commons.logging.Log;
importorg.apache.commons.logging.LogFactory;
importorg.apache.struts.action.ActionForm;
importorg.apache.struts.action.ActionForward;
importorg.apache.struts.action.ActionMapping;
importorg.apache.struts.upload.FormFile;
importorg.hibernate.criterion.MatchMode;
importorg.hibernate.criterion.Order;
importorg.hibernate.criterion.Restrictions;

importcom.gdcn.bpaf.common.base.search.MyCriteria;
importcom.gdcn.bpaf.common.base.search.MyCriteriaFactory;
importcom.gdcn.bpaf.common.base.service.BaseService;
importcom.gdcn.bpaf.common.helper.PagerList;
importcom.gdcn.bpaf.common.helper.WebHelper;
importcom.gdcn.bpaf.common.taglib.SplitPage;
importcom.gdcn.bpaf.security.model.LogonVO;
importcom.gdcn.components.appauth.common.helper.DictionaryHelper;
importcom.kinth.common.base.action.BaseAction;
importcom.kinth.hddpt.file.action.form.FileCatalogForm;
importcom.kinth.hddpt.file.model.FileCatalog;
importcom.kinth.hddpt.file.service.FileCatalogService;
importcom.kinth.hddpt.file.util.MyZTreeNode;

/**
*<p>
*description:“文件上传的Struts层请求处理类”
*</p>
*@date:2013-1-14
*/
<FileCatalog>{
@SuppressWarnings("unused")
privatestaticLoglog=LogFactory.getLog(FileCatalogAction.class);//日志记录
;

//删除记录的同时删除相应文件
publicActionForwardfileDelete(ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse)
throwsException{
String[]id=request.getParameterValues("resourceId");

if(id!=null&&id[0].contains(",")){
id=id[0].split(",");
}
String[]fileUrls=newString[id.length];
for(intj=0;j<id.length;j++){
fileUrls[j]=fileCatalogService.findObject(id[j]).getFileUrl();
if(!isEmpty(fileUrls[j])){
//如果该文件夹不存在则创建一个uptext文件夹
Filefileup=newFile(fileUrls[j]);
if(fileup.exists()||fileup!=null){
fileup.delete();
}
}

fileCatalogService.deleteObject(id[j]);
}
setAllActionInfos(request);
returnlist(mapping,form,request,response);
}


@Override
publicActionForwardsave(ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse)
throwsException{
Stringid=request.getParameter("resourceId");
BooleanfileFlag=Boolean.valueOf(request.getParameter("fileFlag"));

if(fileFlag!=null&&fileFlag==true){
returnsuper.save(mapping,form,request,response);
}else{
StringfileUrl=this.fileUpload(form,request,id,fileFlag);
response.setContentType("text/html");
response.setCharacterEncoding("GBK");
response.setHeader("Charset","GBK");
response.setHeader("Cache-Control","no-cache");
response.getWriter().write(fileUrl);
response.getWriter().flush();
}
returnnull;
}

@SuppressWarnings("unchecked")
publicStringfileUpload(ActionFormform,HttpServletRequestrequest,Stringid,BooleanfileFlag)throwsFileNotFoundException,IOException{

request.setCharacterEncoding("GBK");

StringbasePath=getServlet().getServletConfig().getServletContext().getRealPath("")+"/";
StringfilePath="uploads/";//获取项目根路径;

/*注释部分对应jqueryuploaploadify插件的后台代码,只是还存在编码问题,默认为utf-8
StringsavePath=getServlet().getServletConfig().getServletContext().getRealPath("");//获取项目根路径
savePath=savePath+"\uploads\";
//读取上传来的文件信息
Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();
Enumeration<String>enumeration=fileHashtable.keys();
enumeration.hasMoreElements();
Stringkey=(String)enumeration.nextElement();

FormFileformFile=(FormFile)fileHashtable.get(key);

Stringfilename=formFile.getFileName().trim();//文件名
filename=newEncodeChange().changeCode(filename);
Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件类型
savePath=savePath+filetype+"\";
System.out.println("path:"+savePath);
StringrealPath=savePath+filename;//真实文件路径

//如果该文件夹不存在则创建一个文件夹
Filefileup=newFile(savePath);
if(!fileup.exists()||fileup==null){
fileup.mkdirs();
}
if(!filename.equals("")){
//在这里上传文件
InputStreamis=formFile.getInputStream();
OutputStreamos=newFileOutputStream(realPath);
intbytesRead=0;
byte[]buffer=newbyte[8192];
while((bytesRead=is.read(buffer,0,8192))!=-1){
os.write(buffer,0,bytesRead);
}
os.close();
is.close();
//如果是修改操作,则删除原来的文件
Stringid=request.getParameter("resourceId");
if(!isEmpty(id)){
FileCatalogfileCatalog=fileCatalogService.findObject(id);
StringfileUrl=fileCatalog.getFileUrl();
if(!isEmpty(fileUrl)){
Filefiledel=newFile(fileUrl);
if(filedel.exists()||filedel!=null){
filedel.delete();
}
}

request.setAttribute("entity",fileCatalog);
}

response.getWriter().print(realPath);//向页面端返回结果信息
}*/

//读取上传来的文件信息
Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();
Enumeration<String>enumeration=fileHashtable.keys();
enumeration.hasMoreElements();
Stringkey=(String)enumeration.nextElement();

FormFileformFile=(FormFile)fileHashtable.get(key);

Stringfilename=formFile.getFileName().trim();//文件名
Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件类型
IntegerfileSize=formFile.getFileSize();


filePath+=Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/";
StringrealPath=basePath+filePath+filename;//真实文件路径

if(!filename.equals("")){
//如果是修改操作,则删除原来的文件
if(!isEmpty(id)){
FileCatalogfileCatalog=fileCatalogService.findObject(id);
StringfileUrl=fileCatalog.getFileUrl();
if(!isEmpty(fileUrl)){
fileUrl=basePath+fileUrl;
Filefiledel=newFile(fileUrl);
if(filedel.exists()||filedel!=null){
filedel.delete();
}
}
request.setAttribute("entity",fileCatalog);
}
//如果该文件夹不存在则创建一个文件夹
Filefileup=newFile(basePath+filePath);
if(!fileup.exists()||fileup==null){
fileup.mkdirs();
}
//在这里上传文件
InputStreamis=formFile.getInputStream();
OutputStreamos=newFileOutputStream(realPath);
intbytesRead=0;
byte[]buffer=newbyte[8192];
while((bytesRead=is.read(buffer,0,8192))!=-1){
os.write(buffer,0,bytesRead);
}
os.close();
is.close();
}
filePath+=filename;
Stringresult="{"fileName":""+filename+"","fileType":""+filetype+"","fileSize":"+fileSize+","fileUrl":""+filePath+""}";
returnresult;

}

(){
returnfileCatalogService;
}

(){
this.fileCatalogService=fileCatalogService;
}

}

J. Jquery uploadify图片上传插件无法上传的解决方法

首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!