通过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
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ftp服务器工具（上传游戏文件的必备软件）
08-18
ftp服务器工具（上传游戏文件的必备软件）
FTP文件传输服务
m0_64000472的博客
05-24 1626
FTP是一种文件传输协议，一般使用端口连接，用来上传和下载，实现远程共享文件，和统一管理文件它的工作原理是：工作在TCP/IP协议簇，其传输协议是TCP协议，以提高文件传输的共享性和可靠性，使用C/S模式的工作方式连接，同时处理服务器和客户端的连接命令和数据传输，FTP将命令和数据分开传输，提高传输效率。
java笔记之删除文件和文件夹
weixin_30675967的博客
11-22 196
1、 package com.server.utils; import java.io.File; public class fileclear { /** * 删除单个文件 * @param sPath 被删除文件的文件名 * @return 单个文件删除成功返回true，否则返回false */ ...
利用tftp实现开发板与Linux服务器的文件传输
最新发布
qq_59030165的博客
07-29 1042
本篇主要介绍了如何利用tftp实现开发板与Linux服务器的文件传输。其中要注意的点便是守护进程配置文件的下划线不要忘了，当然还有别输错了其中的WiFi账号密码，其次便是Busybox的tftp语法与Bash上的语法有些差异，用习惯Bash的tftp可能需要时间适应一下。最后留个问题，如何只用服务器的tftp对开发板进行文件传输呢？(￣_,￣ )
Shell脚本实现上传zip压缩文件到FTP服务器
09-15
主要介绍了Shell脚本实现上传zip压缩文件到FTP服务器,本文直接给出实现代码,需要的朋友可以参考下
上传文件到指定服务器【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上传到别的服务器的指定路劲
麦子的博客
11-27 637
1.创建文件路劲 String miguPath = this.getClass().getClassLoader().getResource(File.separator) .getPath() + "template/export/synMigu/"; File file = new File(...
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 web FTPClient实现上传文件到指定服务器
08-27
"java web FTPClient实现上传文件到指定服务器" 基于Java web技术，使用FTPClient实现上传文件到指定服务器是非常有价值的参考知识。...通过掌握这些知识点，可以轻松实现上传文件到指定服务器的功能。
Java通过FTP服务器上传下载文件的方法
09-03
接着，创建或进入指定的服务器目录，然后调用`storeFile`方法上传文件。最后，关闭输入流，注销用户并断开连接。 对于下载文件，可以使用`FTPClient`的`retrieveFile`方法，提供目标文件名和一个输出流来接收文件...
Java FTP 指定下载文件和上传文件到指定的服务器目录
09-14
在本篇文章中，我们将详细介绍如何使用Java编程语言通过FTP（文件传输协议）实现文件的上传与下载功能，并能够将文件指定上传或下载到特定的服务器目录下。此方法已经过测试验证，能够满足基本的需求，并且代码易于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值