jquery.uploadify插件实现上传和预览效果

jquery.image-upload:jQuery的图片上传器插件 图片上传 jQuery的图片上传器插件。 立即下载

1、js代码:

<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').uploadify({
//以下参数均是可选
'uploader'  : '<%=basePath%>images/uploadify.swf',   //指定上传控件的主体文件,默认‘uploader.swf’
'script'    : '<%=basePath%>UploadServlet',       //指定服务器端上传处理文件,默认‘upload.php’
'cancelImg' : '<%=basePath%>images/cancel.png',   //指定取消上传的图片,默认‘cancel.png’
'buttonImg':'<%=basePath%>images/upload2.jpg',
'auto'      : true,               //选定文件后是否自动上传,默认false
'folder'    : '/userphoto'   ,     //要上传到的服务器路径,默认‘/’
'multi'     : false,               //是否允许同时上传多文件,默认false
'fileDesc' : '图片文件' , //出现在上传对话框中的文件类型描述
'fileExt'   : '*.jpg;*.bmp;*.png;*.gif',      //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
'sizeLimit': 86400,          //控制上传文件的大小,单位byte
'onComplete': function(event,queueID,fileObj,response,data) { 
$('#image').attr("src","<%=basePath%>userphoto/"+response);
$('#image').show();
$('#photo').attr("value",response);
},
'onError'          : function(event, queueID, fileObj)  
{   
alert("文件:" + fileObj.name + " 上传失败");   
}
});
});
</script>

2、注意事项
(1)、如果页面没有显示“BROWSE”按钮,则说明你的'uploader'  : '<%=basePath%>images/uploadify.swf'配置不对,检查下路径是否正确。
(2)、如果需要修改按钮的图片:可以使用'buttonImg'配置进行替换
(3)、上传完成后,'onComplete'事件没有触发:在后台servlet处理完后,要向页面输出1,否则页面的onComplete回 调函数不会执行。response.getWriter().write(1);
(4)、如果在后台servlet处理上传将图片的名称改变的话,就不能通过fileObj获得它的值,而是要在后台servlet输出新文件 名:out.print(filename);在jsp页面要相应使用response来获得新值。
(5)、图片预览实现:
在jsp页面中添加一个<img src=""></img>,当上传完成后在onComplete事件中修改img的src值

uploadify实现多图片上传并预览Java版 uploadify实现多图片上传并预览Java版,有效实现前端多图片或文件上传功能,亲测有效。 立即下载

相关推荐

jQuery带删除功能多图片上传预览插件

jQuery带删除功能多图片上传预览插件,支持图片预览,连接数据库需要自己看

Uploadify 控件上传图片 + 预览

jquery的Uploadify控件上传图片和预览使用介绍。 在简单的servlet系统中和在SSH框架中,后台处理不同的,在三大框架中图片预览时费了不少力气,所以下面将两种情况都介绍一下。 1,前台代码 script: $("#uploadify").uploadify({ 'langFile' : '&lt;%=request.getContextPath()%...

dawuafang 281

可预览移除图片的jQuery多张图片批量上传插件代码

可预览移除图片的jQuery多张图片批量上传插件代码 可预览移除图片的jQuery多张图片批量上传插件代码

Jquery.Uploadify 图片上传使用

                                                                                                Controller @Value("${file.path}") private String filePath; @RequestMapping(value = "/uploadI...

hangbingbihai的博客 2031

jQuery插件imgPreviewQs实现上传图片预览

上传图片预览,支持IE6、IE7、IE8、IE9、IE10、IE11。 火狐、Chrome 具体没有测试,但是高版本都支持。 imgPreviewQs.js /*! 依赖 jQuery 1.5.2 (c) 2016 license: http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b = document.createElement('b') b.i

AgentScope实战指南:从源码解析到Qwen模型的多Agent协作开发

本文提供了AgentScope多智能体开发框架的实战指南,详细解析了其核心架构与工作原理,并展示了如何利用Qwen模型构建从单智能体对话到多智能体协作的完整应用。通过两个具体代码实例,指导开发者快速上手环境配置、模型接入与智能体编排,实现高效的多Agent系统开发。

ff678的博客 640

jquery.fileupload.js插件使用初探--单图片上传预览

一、官方插件下载地址:http://plugins.jquery.com/blueimp-file-upload/ 下载下来后会发现里面包含了一堆文件,首先需要弄清楚的是最核心的部分是哪些,根据官方的例子可以知道,一个最简单的jQuery File Upload上传组件,必须包括以下文件: jQuery核心库,建议使用jQuery 1.8以上版本js/vendor/jque

smm188的博客 2194

10xGenomics Loupe Browser实战指南:从数据导入到细胞注释全流程解析

本文提供了10xGenomics Loupe Browser的实战指南,详细解析了从数据导入到细胞注释的全流程。作为一款强大的可视化工具,Loupe Browser能帮助研究者直观探索单细胞测序数据,通过交互式操作进行细胞选择、差异基因分析和细胞类型注释,是单细胞数据分析入门和结果验证的高效平台。

blue42的博客 454

ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js

插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传jquery.imageuploader.js一款jquery多文件上传插件。该jquery多文件上传插件主要用于上传图片,它允许你选择多个图片文件,也可以直接拖拽图片到指定区域,然后显示图片的预览图和信息,最后通过Ajax一次性上传选择的图片到服务器上。该jquery多文件上传插...

weixin_33472998的博客 801

从零到一:用Python打造你的智能交互桌宠,附完整源码与打包指南

本文详细介绍了如何从零开始使用Python开发智能交互桌宠,涵盖环境配置、窗口创建、动图加载、交互功能实现及打包发布全流程。教程特别适合零基础开发者,通过完整源码和分步指南,帮助读者快速掌握桌面宠物开发技巧,打造个性化AI伴侣。

weixin_29094539的博客 293

SCCM实战指南:从零搭建企业级Windows自动化部署平台

本文提供了一份详细的SCCM实战指南,手把手教你从零搭建企业级Windows自动化部署平台。内容涵盖环境规划、AD架构扩展、SQL Server配置、SCCM主站点安装,以及最终实现操作系统镜像的自动化部署,旨在帮助IT管理员彻底告别手动装机,实现高效、规范的Windows设备批量管理。

weixin_29251337的博客 638

jquery.uploadify插件实现图片上传和预览效果

1、js代码: <br /><script type="text/javascript"> <br />$(document).ready(function() { <br />$('#fileInput').uploadify({ <br />//以下参数均是可选 <br />'uploader'  : '<%=basePath%>images/uploadify.swf',   //指定上传控件的主体文件,默认‘uploader.swf’ <br />'script'    : '<%=basePath

renxingxingge的专栏 9892

Godot 2D游戏开发实战:用GDScript复刻10款经典小游戏(附完整源码)

本文是一份Godot 2D游戏开发实战指南,通过使用GDScript语言复刻10款经典小游戏,帮助开发者快速掌握引擎核心功能。内容涵盖从环境配置、GDScript基础到贪吃蛇、Flappy Bird、打砖块、俄罗斯方块等项目的核心逻辑与代码实现,并附有完整源码,旨在通过实践提升独立开发能力。

gold的博客 779

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧。 注意事项   (1)、如果页面没有显示"browse"按钮,则说明你的'uploader' : 'images/uploadify.swf'配置不对,检查下路径是否正确。   (2)、如果需要修改按钮的图片:可以使用'buttonim

ZLHZHJ的专栏 2729

在 Windows 系统下使用 VMware 安装 Ubuntu 24.04 LTS 系统

Ubuntu24.04桌面端官方下载:https://cn.ubuntu.com/download/desktop。

u014695938的博客 1万+

Python爬虫(一)京东商品价格及详情页抓取

这是一个以http://item.jd.com/2957726.html为例的单网页抓取案例 import urllib.request; #载入urllib.request,用于获取页面html源代码 from pandas import Series; #载入series包 from pandas import DataFrame; #载入dataframe包 from bs4 impo

Data Proc 1万+

综合案例分析-------使用uploadify插件实现文件上传功能(如何调用jQuery插件学习第十八,十九天)

1.需求分析: (1)可以选择上传文件类型,限制上传文件大小,实现单个或多个文件同时上传功能,在上传过程中显示文件上传进度比例信息。 (2)文件成功上传后,如果是图片文件,则可以进行图片预览功能。 (3)无论是单个或多个文件成功上传后,可删除其队列中的某一个文件。 2.界面效果:        选择单个或多个文件上传时,显示带百分比的进度条,提示文件上传进度信息。文件上传成功后,通过回调...

weixin_42306620的博客 474

升级conda时出现Malformed version string invalid chars错误解决方案

但有时,当你使用“conda upgrade”的命令时,你可能会遇到一个错误,提示你的环境解析失败,出现“Malformed version string invalid chars”错误消息。如果以上两个步骤都没有解决你的问题,那么你可以考虑更新conda的依赖项。如果你的conda版本已经是最新的,那么你需要清理conda的缓存。最后,如果以上方法都无法解决问题,你可以尝试使用pip进行更新。如果你的conda版本过旧,你需要先更新conda。首先,你需要确认你当前使用的conda版本。

BUG?不存在的! 1412

ASP.NET利用JQuery自动上传图片

记得去年的时候,我在做上传图片是就遇到了一个问题,当时还在博客园的博问中提问过(http://q.cnblogs.com/q/28119/),最终我选择了使用Uploadify解决当时的问题。前几天在做上传图片时,想选择图片之后立即上传,自然而然想到了使用JQuery,但是又遇到了去年遇到的那个问题,这种情况还是需要提交表单才行。前天看到园子的一位朋友写的ASP.NET工作笔记之一:图片上传预览及...

weixin_34233679的博客 78

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

php 上传图片 预览 多张,uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览。效果图:点击浏览文件上传图片,图片依次在右侧显示预览效果。实现:json数据格式如下:页面代码如下:注:需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址">">(最多可上传五张图片)$(funct...

weixin_34060672的博客 295

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

上一篇: .net 地址栏传中文乱码 的解决方法 (如果查看的图片或视频为中文名,页面无法查看图片或者视频)也是如此方法
rose_stone7708
博客等级 码龄17年 31粉丝 8原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值