图片上传的jsp-项目可借鉴-可基于自身调整样式

最新推荐文章于 2022-05-11 08:00:00 发布
最新推荐文章于 2022-05-11 08:00:00 发布
阅读量573 收藏 1
点赞数
分类专栏： 电商项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38371549/article/details/78151063
版权
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8">
<title>jQuery File Upload Demo</title>
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="/js/file-upload/bootstrap-3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="/js/file-upload/css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="/js/file-upload/gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="/js/file-upload/css/jquery.fileupload.css">
<link rel="stylesheet" href="/js/file-upload/css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="/js/file-upload/css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="/js/file-upload/css/jquery.fileupload-ui-noscript.css"></noscript>
</head>
<body>
<div class="container">
    <form id="fileupload" action="/pic/upload" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>选择文件(多选)</span>
                    <input type="file" name="files" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>开始上传</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消上传</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>删除</span>
                </button> 
                <input type="checkbox" class="toggle" title="全选">
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>
    <br>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">说明</h3>
        </div>
        <div class="panel-body">
            <ul>
                <li>上传的文件大小限制为：<strong>5 MB</strong>.</li>
                <li>只支持的文件格式为：<strong>JPG, GIF, PNG, BMP </strong>.</li>
            </ul>
        </div>
    </div>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>开始</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>取消</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img width="80" height="50" src="{%=file.url%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.url?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<script src="/js/file-upload/jquery-1.11.1.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/js/file-upload/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="/js/file-upload/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/js/file-upload/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="/js/file-upload/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="/js/file-upload/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="/js/file-upload/gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/js/file-upload/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/js/file-upload/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/js/file-upload/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/js/file-upload/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/js/file-upload/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/js/file-upload/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/js/file-upload/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/js/file-upload/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="/js/file-upload/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="/js/file-upload/cors/jquery.xdr-transport.js"></script>
<![endif]-->
</body> 
</html>
云E办Springboot+vue——前端项目完整版（含源码）
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
模糊测试--强制性安全漏洞发掘
软件性能测试专栏
01-20 2万+
文档分享地址链接：http://pan.baidu.com/share/link?shareid=2723797392&uk=2485812037 密码：r43x 前 言 我知道"人类和鱼类能够和平共处" 。 --George W. Bush, 2000年9月29日 简介 模糊测试的概念至少已经流传了20年，但是直到最近才引起广泛的关注。安全漏洞困扰了许多流行的客户端应用程序
使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
weixin_34205076的博客
10-19 170
在很多情况下，我们网站可能会展示我们的产品图片、以及教程视频等内容，结合一个比较好的图片、视频展示插件，能够使得我们的站点更加方便使用，也更加酷炫，在Github上有很多相关的处理插件可以找来使用，有些效果还非常好，本篇介绍使用图片视频展示插件blueimp Gallery改造网站的视频图片展示，并和之前版本的效果进行对比。 1、blueimp Gallery插件介绍 blueimp Gall...
jsp+servlet小项目（实现图片上传功能）
07-21
基于jsp+servlet实现的小项目（实现图片上传功能）
jsp文件上传进度条实现（可以自定义进度条样式）
01-08
1、支持多个文件上传， 2、进度条样式可以自定义， 3、按照百分制的进度显示
jsp图片上传完整示例
01-06
可以直接运行的完整示例哦，是用struts+hibernate完成的。
图片上传JSP代码
04-23
利用AJAX，文件输入输出流实现 图片的简单上传功能 内含1份Java代码 2份JSP代码 //判断文件夹image是否存在，若不存在则创建 部分代码 File folder = new File(imgFolderPath); System.out.println("function 'uploadFileTest2'-imgFolderPath'"+imgFolderPath); if(!folder.exists()) { folder.mkdir(); System.out.println("maked a folder!"); } File _file = new File(srcFileName); //读入文件 Image src = javax.imageio.ImageIO.read(_file); //构造Image对象 int wideth=src.getWidth(null); //得到源图宽 int height=src.getHeight(null); //得到源图长
JSP中的文件上传
Neo_Wang的博客
08-18 774
文件上传 准备： 1）：上传控件所在的表单的method，必须是POST： 因为GET方式传入的数据大小不能超过2KB,而PSOT没有大小限制。 <form method="POST"> 2）：上传控件得使用type为file的类型 <input type="file" name="headImg" /> 3） ：表单的编码方式必须时二进制编码 <form enc...
网站项目管理规范指南
热门推荐
xyrrwcom的专栏
03-25 6万+
1. 概述　　关于本指南的目的，大纲描述。1.1 什么是网站项目管理规范指南　　《网站项目管理规范指南》读做“网站-项目管理-规范-指南”，顾名思义就是针对网站项目管理，提供规范管理的建议和指导。之所以称作“指南”，是因为我们的规范不是标准，标准是由国家制定的。我们只是将我们认为最好的管理办法推荐给您，供您参考。我们希望您本指南能够带给您切实的工作上的帮助！1.2 编写目的 我们编写网站项目管理规
Maven知识概括
weixin_41005188的博客
07-27 1080
Maven知识概括
多图片上传时，jsp页面代码
09-06
多图片上传时，图片标志位的更改，和上传前的验证，避免重复上传
jsp + jquery实现的漂亮上传
08-04
jsp + jquery实现的漂亮上传 客户端使用了jquery的uploadify插件,显示多文件的一步上传. 实时显示上传比例. 有着漂亮的界面. 演示效果:http://www.uploadify.com/demo/ 后台使用了Apache的Commons fileUpload 来完成对上传文件的读取与保存 压缩包里是个MyEclipse6.6的项目 改天再把教程写到我blog 希望有朋友喜欢
jsp 图片拖拽排序,img src自动改变
01-26
jsp,java,图片拖拽改变,src改变
Jsp实现上传文件格式控制
10-21
Jsp上传文件格式控制，主要是对上传文件后缀名判断，如上传MP3文件，匹配后缀名是否为MP3，若为则可上传，否则不能上传。
jsp界面上传附件到服务器的实例
01-20
一个简单的javaWeb项目，在前台jsp界面上传附件 亲测可以实现。如有问题欢迎讨论
2022最新Web方面相关面试题解析（已拿Offer）
m0_68850571的博客
05-11 534
Web方面相关： 291.WEB应用中如果有.class和.jar类型的文件一般分别应该放在什么位置？ 答:.class文件放在WEB-INF/classes文件下，.jar文件放在WEB-INF/lib文件夹下 292.元素中有一个输入框（< input type='text' name=”username”id=”username”value=””/>,请用JavaScript语言写一行代码，取得这个输入框中的值。 答:document.getElementById(“usernam
JSP关于图片的上传与显示
ifyouwjk的博客
11-23 3562
SmartUpload
java图片上传的css样式_前端图片上传解决方案
weixin_35834271的博客
02-27 785
图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，(比如我以前自己写的一个后台系统)现在在这里总结下图片上传的解决方案。主要有一下几种：1.input 标签之 file 类型2.FileReader 对象：读取文件3.FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串4.FormData 对象5.使用 axio...
jsp页面中插入css样式的三种方法
wzy_3463的专栏
11-07 4万+
1、 外部样式        当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：                                    2、内部样式       当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用标签在文档头部定义
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值