通过ftp上传文件到指定服务器

最新推荐文章于 2024-07-29 11:32:04 发布
最新推荐文章于 2024-07-29 11:32:04 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34385347/article/details/77440168
版权
本文展示了如何使用JSP页面和WebUploader库实现文件上传功能。通过JavaScript代码实现图片预览和删除，同时提供了后端Java代码处理上传请求，包括FTP连接、文件保存以及错误处理。文件上传后会被保存到指定的FTP服务器路径。
摘要由CSDN通过智能技术生成

jsp页面上传部分代码

<script src="${ctxStatic}/js/newUpload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var point_img = $("#activty_wechat_input").val();
if(point_img != "") {
var filelist = point_img.split(",");
$.each(filelist, function(k, v){
var string = "<li><p class=\"imgWrap\"><img src=\"" + v + "\"></p><div title=\"删除\" class=\"cancel\"></div></li>";
$(".imglist").append(string);
});
}
 
//删除图片调整路径
$(document).on("click",".imglist .cancel", function(){
var pointImg = $("#activty_wechat_input").val();
$(this).parent("li").remove();
var newSrc = "", imgsrc = $(this).parent("li").find("img").attr("src");
if(pointImg.indexOf(imgsrc + ",") != -1) {
newSrc = pointImg.replace(imgsrc + ",", "");
} else {
newSrc = pointImg.replace(imgsrc, "");
}
  if (newSrc.charAt(newSrc.length - 1) == ',') {
  newSrc = newSrc.substring(0, newSrc.length - 1);
  }
$("#activty_wechat_input").val(newSrc);    
$("#packageImg").val(newSrc);
});
});
</script>


<body>
<form:form id="inputForm" modelAttribute="activtyWechat" action="${ctx}/comprehensive/activtyWechat/save" method="post" class="form-horizontal">
<form:hidden path="id"/>
<input id="func" type="hidden" value="activtyImg">
        <input id="func_no" type="hidden" value="img">
        <input id="store_no" name="storeNo" type="hidden" value="activtyImg${entry.activtyId}">

<div class="control-group">
<label class="control-label">图片：</label>
<div class="controls">
<style type="text/css">
.imglist li {
   width: 110px;
   height: 110px;
   background: url(/JGGFrame/static/images/webuploader/bg.png) no-repeat;
   text-align: center;
   margin: 0 8px 20px 0;
   position: relative;
   display: inline;
   float: left;
   overflow: hidden;
   font-size: 12px;
   }
   
   .imglist li p.imgWrap {
   position: relative;
   z-index: 2;
   line-height: 110px;
   vertical-align: middle;
   overflow: hidden;
   width: 110px;
   height: 110px;

   -webkit-transform-origin: 50% 50%;
   -moz-transform-origin: 50% 50%;
   -o-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;

   -webit-transition: 200ms ease-out;
   -moz-transition: 200ms ease-out;
   -o-transition: 200ms ease-out;
   -ms-transition: 200ms ease-out;
   transition: 200ms ease-out;
}

.imglist li img {
   width: 100%;
   height: 100%;
}

.imglist .cancel {
width:20px;
height:20px;
background:url(/JGGFrame/static/images/webuploader/icons.png) no-repeat -48px -0.5px;
position: absolute;
right:0;
top:0;
cursor:pointer;
overflow:hidden;
z-index:10;
}
</style>


<ul class="imglist">
<input name="point_img" type="hidden" value="${entry.activtyBannerImgString}" id="activty_wechat_input" />
</ul>


</div>
</div>

<div class="control-group">
<input id="packageImg" name=activtyBannerImg value="${entry.activtyBannerImg}" type="hidden"/>
<input name="pointImg" id="packagesThumbnail" style="display: none" />
<label class="control-label">图片：</label>
<div class="controls">
           <div id="uploader">
               <div class="queueList">
<div id="dndArea" class="placeholder">
                       <div id="filePicker"></div>
                       <p>或将照片拖到这里，单次最多可选15张</p>
                   </div>
               </div>
               <div class="statusBar" style="display:none;">
                   <div class="progressBar">
                       <span class="text">0%</span>
                       <span class="percentage"></span>
                   </div><div class="info"></div>
                   <div class="btns">
                       <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                   </div>
               </div>
           </div>
</div>
</div>
</form:form>
</body>


引用的js代码

(function( $ ){
    // 当domReady的时候开始初始化
    $(function() {
        var $wrap = $('#uploader'),
            // 图片容器
            $queue = $( '<ul class="filelist"></ul>' ).appendTo( $wrap.find( '.queueList' ) ),
            
            // 状态栏，包括进度和控制按钮
            $statusBar = $wrap.find( '.statusBar' ),


            // 文件总体选择信息。
            $info = $statusBar.find( '.info' ),


            // 上传按钮
            $upload = $wrap.find( '.uploadBtn' ),


            // 没选择文件之前的内容。
            $placeHolder = $wrap.find( '.placeholder' ),


            $progress = $statusBar.find( '.progress' ).hide(),


            // 添加的文件数量
            fileCount = 0,


            // 添加的文件总大小
            fileSize = 0,


            //返回原图路径
            path = $("#packageImg").val(),
            
            //返回缩略图路径
            thumbnail_path = $("#packagesThumbnail").val(),
            
            //商家号
            store_no = $("#store_no").val(),
            
            //功能名称
            func = $("#func").val(),
            
            //功能代号
            func_no = $("#func_no").val(),


            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,


            // 缩略图大小
            thumbnailWidth = 110 * ratio,
            thumbnailHeight = 110 * ratio,


            // 可能有pedding, ready, uploading, confirm, done.
            state = 'pedding',


            // 所有文件的进度信息，key为file id
            percentages = {},
            // 判断浏览器是否支持图片的base64
            isSupportBase64 = ( function() {
 

最低0.47元/天 解锁文章
小新man
关注
专栏目录
上传文件到指定服务器【FTP服务器上】
BruceYang的博客
07-13 862
web.config 文件定义对应的参数，方便调用修改 <appSettings file="ConfigFiles\WebAppSettings.config"> <!--FTP服务器 共享文件夹路径--> <add key="FTPShareUNC_Path" value="\\10.122.10.249\jdtestfile0702"/&gt...
通过ftp上传图片到服务器并支持下载预览
bsbfl的博客
10-13 5733
关于图片上传的问题，其实实现起来是很简单的，但是，由于项目中会牵扯到服务器内存及清理策略，所以，最好是上传到服务器指定的一个文件夹里，然后访问的时候再去这个文件夹中找。最初用的是ftp上传下载的方式来实现的，但是后来发现使用nfs共享文件的方式才是最可取的，因为不会浪费服务器的内存。此篇文章先记录使用ftp上传下载的方式来实现图片的上传到服务器及预览。。。。。     言归正传，首先需要ft
FTP文件传输服务
m0_64000472的博客
05-24 1720
FTP是一种文件传输协议，一般使用端口连接，用来上传和下载，实现远程共享文件，和统一管理文件它的工作原理是：工作在TCP/IP协议簇，其传输协议是TCP协议，以提高文件传输的共享性和可靠性，使用C/S模式的工作方式连接，同时处理服务器和客户端的连接命令和数据传输，FTP将命令和数据分开传输，提高传输效率。
利用tftp实现开发板与Linux服务器的文件传输
最新发布
qq_59030165的博客
07-29 1078
本篇主要介绍了如何利用tftp实现开发板与Linux服务器的文件传输。其中要注意的点便是守护进程配置文件的下划线不要忘了，当然还有别输错了其中的WiFi账号密码，其次便是Busybox的tftp语法与Bash上的语法有些差异，用习惯Bash的tftp可能需要时间适应一下。最后留个问题，如何只用服务器的tftp对开发板进行文件传输呢？(￣_,￣ )
ftp|sftp上传文件（图片）到远程服务器
qq_41661003的博客
03-30 1077
ps:如若出现报错，连接ftp失败，在Telnet以及确认无防火墙拦截的情况下，说明服务器不支持ftpClient连接方式。2.sftp上传文件。
将图片上传到FTP服务器
热门推荐
Elsa
12-10 1万+
【FTP服务器】 FTP是什么？ FTP是File Transfer Protocol(文件传输协议)的英文简称，用于Internet上的控制文件的双向传输。同时，他也是一个应用程序，基于不同的操作系统有不同的FTP应用程序，而所有的这些应用程序都遵循同一种协议以传输文件。在FTP的使用当中，用户经常遇到两个概念，下载和上传，下载就是从远程主机拷贝文件至自己的计
ftp上传图片到服务器的某个文件夹下,node ftp 模块 如何把本地多个文件夹或者文件上传到服务器...
weixin_29015127的博客
08-05 188
//先利用fs模块获取所有文件var walk = function (dir, done) {var results = [];fs.readdir(dir, function (err, list) {if (err) return done(err);var pending = list.length;if (!pending) return done(null, results);list...
Java实现上传文件图片到指定服务器目录
08-27
本文将通过实例代码，详细介绍Java实现上传文件图片到指定服务器目录的相关知识点。 一、Java文件上传的基本概念 Java文件上传是指将文件从客户端上传到服务器端的过程。在这个过程中，需要使用到 Jakarta Commons...
上传本地文件夹的文件到FTP服务器指定目录
07-14
4. C# FTP上传代码示例：以下是一个简单的C# FTP文件上传示例，展示了如何连接服务器、设置目录并上传文件： ```csharp using System; using System.IO; using System.Net; public class FtpUploader { public ...
java ftp 上传文件到服务器,java实现ftp上传文件到服务器
weixin_33172127的博客
08-06 1235
java实现ftp上传文件到服务器 内容精选换一换怎样上传文件到Windows操作系统云服务器？安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具，将文件上传到云服务器。例如QQ.exe。在本地主机和Windows云服务器上分别安装数据传输工具，将文件上传到云服务器。例如QQ.exe。本地磁盘映射(推荐使用)使用远程桌面连接MSTSC方式进行数据传输。该方式不支持断点续安装传输工...
Java FTP 指定下载文件和上传文件到指定的服务器目录
09-14
在本篇文章中，我们将详细介绍如何使用Java编程语言通过FTP（文件传输协议）实现文件的上传与下载功能，并能够将文件指定上传或下载到特定的服务器目录下。此方法已经过测试验证，能够满足基本的需求，并且代码易于...
文件FTP上传的工具类
07-08
ftp 上传时，用到的工具类，项目上配置好ftp服务器后，controller可以方便的调用此工具类进行上传
使用前端插件上传文件到ftp服务器
08-24
使用前端插件上传文件到ftp服务器，上传配置灵活，通过配置文件即可配置文件类型大小，还有ftp服务器连接信息
java web FTPClient实现上传文件到指定服务器
08-27
"java web FTPClient实现上传文件到指定服务器" 基于Java web技术，使用FTPClient实现上传文件到指定服务器是非常有价值的参考知识。...通过掌握这些知识点，可以轻松实现上传文件到指定服务器的功能。
利用FTP协议上传图片至FTP服务器——C#篇
zqckzqck的专栏
05-28 3473
列举一个需求，在使用U3D的工程中，利用摄像头拍摄图像并保存，而后上传至指定的FTP服务器，清空保存图像。 别的不多说，上代码吧！ （一）摄像头保存图像至本地 1.获取权限，初始化摄像头 IEnumerator InitCamera() { //获取授权 yield return Application.RequestUserAuthoriza...
用ftp上传项目到服务器上,ftp上传项目到服务器上
weixin_32224199的博客
08-06 382
ftp上传项目到服务器上 内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具，将文件上传到云服务器。例如QQ.exe。在本地主机和Windows云服务器上分别安装数据传输工具，将文件上传到云服务器。例如QQ.exe。本地磁盘映射(推荐使用)使用远程桌面连接MSTSC方式进行数据传输。该方式不支持断点续传，可能存在传输中断的情况，因此不建议上传大文华为云帮助中心，为用...
ftp上传 如何批量传文件到服务器
qianhsiguang的博客
06-09 956
如何批量传文件到服务器？我首先想到的就是用ftp上传。 用ftp批量传文件到服务器上，首先需要准备一台服务器（我用的是win系统的），然后是远程连接服务器的工具（我用的是IIS7服务器管理工具）和ftp客户端（我用的是FileZilla_Server）。 第一步，使用IIS7服务器管理工具进入服务器。 第二步，在服务器内下载ftp客户端。然后进行账户设置 双击安装包，默认点击下一步即可直至安装成功。然后在编辑里选择用户，然后进行账户设置。添加账户—启用账户、密码—添加共享文件。 安装步骤图省略，全部选择默
FTP文件传输服务器
想做职场小白吗? 我来教您.......
08-28 1970
（1）配置了虚拟用户登录后，本地用户登录就会失效。可以通过修改PAM认证文件调用的模块函数库可以解决。（2）vsftpd主配置文件中必须要开启本地登录模式。如果不开，将报错，提示本地模式和匿名模式必须开启一个，显然虚拟用户模式就是为了提高安全，因此我们不开匿名模式而开启本地模式。（3）2.6.4节中的主配置文件参数allow_writeable_chroot=YES必须开启如果不开将报错。（4）防火墙影响ftp登录，默认情况防火墙策略阻止了ftp端口，ftp客户端登录将得到“无法路由到主机”的报错。
java笔记之删除文件和文件夹
weixin_30675967的博客
11-22 197
1、 package com.server.utils; import java.io.File; public class fileclear { /** * 删除单个文件 * @param sPath 被删除文件的文件名 * @return 单个文件删除成功返回true，否则返回false */ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值