实现图片单张上传

最新推荐文章于 2024-07-22 15:12:37 发布
最新推荐文章于 2024-07-22 15:12:37 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： 初入JAVA 文章标签： bootstrap 数据库 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ning9255/article/details/74002456
版权 
如题。
主要功能是：实现单张上传、验证重复、向数据库里面插入记录。
一、首先是前端jsp：
（使用的是Bootstrap框架，只包含图片上传部分代码）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="content-type" content="text/html";charset="UTF-8">
    <!-- 格式 -->
    <%@include file="/WEB-INF/page/common.jsp" %>
</head>

<body>
<div style='width:50%;height:350px;'>
            <form onsubmit="return ftp_submit();" action="../UploadServlet" method="post" enctype="multipart/form-data" style='padding-top:30px;'>
                <div class='form-group' style='width:50%;height:150px;float:left;position:relative;'> 
                    <label style='position:absolute;z-index:50;width:100%;height:150px;box-sizing:border-box;padding:0 10px 0 20px;' for='ftp_image'><img id='ftp_imgg' src='' style='width:100%;height:100%;border:1px #ccc solid;'></label>
                    <input class='hide' style='position:absolute;z-index:50;float:left;width:70%;margin-top:4px;' id='ftp_image' type="file" name="image" onchange="previewImage(this,'imgPreviewId')"><br>
                </div>
                <div class='form-group' style='width:50%;height:150px;position:relative;float:left;' >
                    <div id='ftp_show1' class='hide' style='position:absolute;z-index:40;box-sizing:border-box;padding:0 20px 0 10px;width:100%;height:150px;'>
                        <img  style='border:1px #ccc solid;background:#fff;box-sizing:border-box;width:100%;height:150px;' alt="" src="" name="srcImage" id="imgPreviewId">
                    </div>
                    <div id='ftp_show2' class='' style='position:absolute;z-index:40;box-sizing:border-box;padding:0 20px 0 10px;width:100%;height:150px;'>
                        <span class='' style='line-height:150px;text-align:center;font-size:30px;color:#ccc;float:left;border:1px #ccc solid;box-sizing:border-box;width:100%;height:150px;'>图片展示区</span>
                    </div>
                </div>
                <div class='form-group' style='clear:both;box-sizing:border-box;padding:0 20px;width:100%;height:34px;position:relative;'>
                    <input placeholder='输入4-10位由数字或字母或下划线组成的名称(image)' onKeypress='press(event)'  onKeydown='press1(event)'  onKeyup='press2(event)' style='float:left;width:100%;' id='ftp_name' class='form-control' type="text" name="name">
                    <span id='ftp_verification'  style='color:#f00;font-size:12px;line-height:34px;position:absolute;right:6%;top:34px;'></span>
                 </div>
                <div class='btn_group' style='position:relative;width:120px;height:34px;clear:both;left:50%;margin-left:-60px;' >
                    <input type="submit" value="上传" style='text-align:center;width:54px;height:34px;float:left;border: 1px solid transparent;border-radius: 4px;background: #476dbe;color: #fff;'> 
                    <span onclick='close_ftpimg()' id='close_ftp' style='margin-left:8px;text-align:center;width:54px;height:34px;float:left;border: 1px solid #ccc;border-radius: 4px;background: #fff;color: #303030;line-height:34px;'>取消</span>
                </div>
            </form>
    </div>
</body>
<script type="text/javascript" src="../upload.js"></script>
<html>

jsp中主要是处理了样式，布局的规范性，

二、js中主要是进行验证，包括验证文件扩展名、浏览器版本的验证、输入名称的验证（项目中插入的图片样式名称记录需要入库，需保证不重复）以及不允许为空等等。
代码如下（js）：

// 去左空格
function ltrim(s) {
    return s.replace(/^\s*/, "");
}
// 去右空格
function rtrim(s) {
    return s.replace(/\s*$/, "");
}
// 去左右空格
function trim(s) {
    return rtrim(ltrim(s));
}
// 获取文件扩展名
function get_ext(f_path) {
    var ext = '';
    if (f_path != null && trim(f_path).length > 0) {
        f_path = trim(f_path);
        ext = f_path.substring(f_path.lastIndexOf(".") + 1, f_path.length);
    }
    return ext;
}
// 验证文件扩展名
function chk_ext(f_path) {
    var ext = get_ext(f_path);
    // 根据需求定制
    var accept_ext = new Array( "bmp", "jpeg", "jpg", "gif","png");
    var flag = false;
    if (ext != '') {
        for ( var i = 0; i < accept_ext.length; i++) {
            if (ext == accept_ext[i])
                flag = true;
        }
    }
    return flag;
}

/*★★★★★★★★★★★★★★★★★★★*/

//js本地图片预览，兼容ie[6-8]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage1(fileObj,imgPreviewId,divPreviewId){
    var allowExtention="doc,pdf,bpm,jpeg,jpg,gif,ppt,xls";//document.getElementById("hfAllowPicSuffix").value;//.jpg,.bmp,.gif,.png,允许上传文件的后缀名
    var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
    var browserVersion= window.navigator.userAgent.toUpperCase();
    if(allowExtention.indexOf(extention)>-1){               
        if (browserVersion.indexOf("MSIE")>-1){
            if(browserVersion.indexOf("MSIE 6.0")>-1){//ie6
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
            }else{//ie[7-8]、ie9未测试
                fileObj.select();
                var newPreview =document.getElementById(divPreviewId+"New");
                if(newPreview==null){
                    newPreview =document.createElement("div");
                    newPreview.setAttribute("id",divPreviewId+"New");
                    newPreview.style.width = document.getElementById(imgPreviewId).style.width;
                    newPreview.style.height = document.getElementById(imgPreviewId).style.height;
                    newPreview.style.border="solid 1px #d2e2e2";
                }
                newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                            
                var tempDivPreview=document.getElementById(divPreviewId);
                tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
                tempDivPreview.style.display="none";                    
            }
        }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
            var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if(firefoxVersion<7){//firefox7以下版本
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
            }else{//firefox7.0+                    
                document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
            }
        }else if(fileObj.files){               
            //兼容chrome、火狐等，HTML5获取路径                   
            if(typeof FileReader !== "undefined"){
                var reader = new FileReader(); 
                reader.onload = function(e){
                    document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                } ; 
                reader.readAsDataURL(fileObj.files[0]);
            }else if(browserVersion.indexOf("SAFARI")>-1){
                alert("暂时不支持Safari浏览器!");
            }
        }else{
            document.getElementById(divPreviewId).setAttribute("src",fileObj.value);
        }         
    }else{
        alert("仅支持"+allowExtention+"为后缀名的文件!");
        fileObj.value="";//清空选中文件
        if(browserVersion.indexOf("MSIE")>-1){                        
            fileObj.select();
            document.selection.clear();
        }                
        fileObj.outerHTML=fileObj.outerHTML;
    }
}

function previewImage(fileObj,imgPreviewId) {
    console.log($('#ftp_image').val());
    /***********/
    if($('#ftp_image').val().length>0){
        $('#ftp_show1').removeClass('hide');
         $('#ftp_show2').addClass('hide'); 
    }else{
        $('#ftp_show1').addClass('hide');
         $('#ftp_show2').removeClass('hide'); 
    }


    /******/
    $('#ftp_name').focus().blur();
    var pic = document.getElementById(imgPreviewId),
        file = fileObj;
    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
    /***********/
    if($('#ftp_image').attr('src')!==''){
        $('#ftp_img').addClass('hide');
    }else{
        $('#ftp_img').removeClass('hide');
    }

    /*********/
     // gif在IE浏览器暂时无法显示
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         layer.msg("图片的格式必须为png或者jpg或者jpeg格式！",{icon:2});
         $('#imgPreviewId').attr('src','');
         return;
     }
     var isIE = navigator.userAgent.match(/MSIE/)!= null,
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

     if(isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;

        // IE6浏览器设置img的src为本地路径可以直接显示图片
         if (isIE6) {
            pic.src = reallocalpath;
         }else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
             pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
         }
     }else {
        html5Reader(file,imgPreviewId);
     }
}

 function html5Reader(file,imgPreviewId){
     var file = file.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function(e){
         var pic = document.getElementById(imgPreviewId);
         pic.src=this.result;
     };
}
 /******名称的验证******/
 function verification_con(){
     var regu='^[a-zA-Z0-9_]{4,10}$';
        var re=new RegExp(regu);
        var str_value='';
        $('#ftp_name').css('border-color','#f00');
        $('#ftp_verification').css('color','#f00');
        if(re.test($('#ftp_name').val())){
            /******需要传递的参数******/
        /***验证是否重复****/
        ftp_images_name=$('#ftp_name').val()+'.'+get_ext($('#ftp_image').val());
        var p={'name':$('#ftp_name').val(),'file':ftp_images_name}
        $.ajax({
            'url' : "/uploadController/whetherToRepeat.do",
            'type' : 'post',
            'contentType': "application/json",
            'data':JSON.stringify(p),
            'success' : function(data) {
                if(data){
                    $('#ftp_name').css('border-color','#0f0');
                    /**当不重复可以传值***/
                    $('#ftp_verification').css('color','#0f0');
                    str_value='输入的名称格式正确';
                }else{
                    str_value='输入的名称重复';
                }
                $('#ftp_verification').html(str_value);
            }

        });
        }else{
            if($('#ftp_name').val().length<4){
                str_value='输入的名称长度不足4位';
                $('#ftp_verification').html('');
            }else if($('#ftp_name').val().length>3&&$('#ftp_name').val().length<11){
                str_value='输入的格式不正确';
            }else if($('#ftp_name').val().length>10){
                str_value='输入的名称长度超过了10位';
            }
        }
        $('#ftp_verification').html(str_value);
 }
 $('#ftp_name').on('focus',function(){
    $('#ftp_name').css('border-color','#ccc');
    $('#ftp_verification').html('');
 })
  $('#ftp_name').on('blur',function(){
       if($('#ftp_name').val()==''){
         if($('#ftp_image').val()==''){
            $('#ftp_name').css('border-color','#f00');
            $('#ftp_verification').html('请选择图片').css('color','#f00');
         }else{
                var str_name=$('#ftp_image').val();
                var ftp_path_name='';
                for(var i=str_name.length-1;i>-1;i--){
                    if(!(str_name.charAt(i).indexOf('\\'))){
                        ftp_path_name=str_name.slice(i+1);
                        break;
                    }
                }
                ftp_path_name=ftp_path_name.slice(0,ftp_path_name.indexOf('.'));
                $('#ftp_name').val(ftp_path_name);
                verification_con();
         }
     }else{
         verification_con();
     }
 })

 /****上传之前的验证****/
function ftp_submit(){
     var value=false;
     if($('#ftp_verification').html()=='输入的名称格式正确'){
         if($('#imgPreviewId').attr('src')!=''){
             value=true;
         }

     }
     console.log(value);

     return value;
 }

/****input不允许输入空******/
function press(e){
    var event = e || event; 
    console.log(event.keyCode)
      if(event.keyCode == 32||event.keyCode == 190){
          event.preventDefault();  
          event.returnValue = false
        }
}
function press1(e){
    var event = e || event; 
    if(event.keyCode == 32||event.keyCode == 190){
          event.preventDefault();  
          event.returnValue = false
        }
}
function press2(e){
    var event = e || event; 
    if(event.keyCode == 32||event.keyCode == 190){
          event.preventDefault();  
          event.returnValue = false
        }
}

/***图片上传***/
$('#ftp_imgg').attr('src',basePath+'/images/ftp-img.jpg');
var ftp_index;
function showimagesftp(text){
    $('#imagesftp').removeClass('hide');
    ftp_index=layer.open({
        type: 1,
        title: text,
        shadeClose: true,
        shade: 0.8,
//        maxmin: true,
        area: ['50%', '350px'],
        closeBtn : 1,
        content : $("#imagesftp"),
        scrollbar: false,
        end:function(){ 
            /***清空图片上传内容****/
            $('#ftp_name').val('');
            $('#ftp_image').val('');
            $('#imgPreviewId').attr('src','');
            $('#ftp_img').removeClass('hide');
            $('#imagesftp').addClass('hide');
            $('#ftp_name').css('border-color','#ccc');
            $('#ftp_verification').html('');
            $('#ftp_show1').addClass('hide');
             $('#ftp_show2').removeClass('hide'); 
        }
    });
}
function close_ftpimg(){
    layer.close(ftp_index);
}

其中在验证名称是否重复时，用ajax去后台数据库里面进行查询，如果相同，则不允许插入，其前端js中代码如下：
（java代码中写一方法去数据库查询，作比较，返回布尔型值，判断是否重复，后台写法根据需要各异）

$.ajax({
            'url' : "/uploadController/whetherToRepeat.do",
            'type' : 'post',
            'contentType': "application/json",
            'data':JSON.stringify(p),
            'success' : function(data) {
                if(data){
                    $('#ftp_name').css('border-color','#0f0');
                    /**当不重复可以传值***/
                    $('#ftp_verification').css('color','#0f0');
                    str_value='输入的名称格式正确';
                }else{
                    str_value='输入的名称重复';
                }
                $('#ftp_verification').html(str_value);
            }

        });

三、在前端检查无误后，将会跳转到servlet去执行图片上传：
UploadServlet
实现图片上传，并将图片重命名，插入数据库，以便使用。

package com.dsg.dbmonitor.controller.dbmanager;


import java.io.IOException;
import java.io.InputStream;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Properties;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dsg.dbmonitor.utils.HttpUtil;
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;


@MultipartConfig
@WebServlet(urlPatterns = "/UploadServlet", initParams = {})
public class UploadServlet extends HttpServlet{

    private static final long serialVersionUID = 1L;

    public UploadServlet() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        /*
        * 获取参数
        * 然后执行插入
        */
        String name = request.getParameter("name");
        String fileName = "";
        String path = request.getSession().getServletContext().getRealPath("/images/");

        fileName = HttpUtil.upload(request, "image", path,name);

        /*
         * 动态获取数据库配置文件的内容
         * 将刚插入的文件的记录放到数据库中
         */
        InputStream is = getClass().getResourceAsStream("/db.properties");
            Properties dbProps = null;
            try {
                dbProps = new Properties();
                dbProps.load(is);
            } catch(IOException e) {
                e.printStackTrace();
            }
            String ifSingle = dbProps.getProperty("jdbc.url");
            String conn_username = dbProps.getProperty("jdbc.username");
            String conn_pass = dbProps.getProperty("jdbc.password");
            String[] newifSingle = ifSingle.split("[?]");
            String newpath = newifSingle[0];
            System.out.println("查看参数"+ifSingle+"\n"+newpath+"\n"+conn_username+"\n"+conn_pass);


            String filePath = "images/";
            String css_path = filePath+fileName;
            String[] newStr = fileName.split("\\.");
            Date now = new Date();
            SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
            String creattime = dateFormat.format( now );

            Connection conn = null;
            PreparedStatement ps = null;
            try {
                conn = (Connection) DriverManager.getConnection(newpath,conn_username,conn_pass);
                ps = (PreparedStatement) conn.prepareStatement("INSERT INTO  sys_custom_css_tb (css_path,css_name,css_stat,create_time) VALUES (?,?,?,?)");
                ps.setObject(1, css_path);
                ps.setObject(2, newStr[0]);
                ps.setObject(3, "1");
                ps.setObject(4, creattime);
                ps.executeUpdate();
            } catch (SQLException e) {
                e.printStackTrace();
            }
            /*
             * 插入完成后，跳转会本页面
             */
            response.sendRedirect("loginManager/pageRedirect.do?menu=" + "sysmanager/custom_sql");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

}

其中需要两个工具类
1。HttpUtil
获取原图片名称，做更改后，执行上传功能。
代码如下：

package com.dsg.dbmonitor.utils;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.Part;

public class HttpUtil {

    public static String upload(HttpServletRequest request, String name, String upload_path ,String oldname)
            throws IOException, ServletException {
        // 获得文件路径和文件名
        String fileName = "";
        Part part = request.getPart(name);
        if (part != null) {
            String realName = getFileName(part);
            System.out.println(realName+"====realName");
            fileName = FileHelper.generateFileName(realName,oldname);

            // 执行文件上传
            if (!realName.equals("")) {
                File file = new File(upload_path, fileName);
                if (!file.exists()) {
                    file.createNewFile();
                }
                InputStream in = part.getInputStream();
                FileOutputStream out = new FileOutputStream(file);
                byte[] cache = new byte[256];
                int length = 0;
                while ((length = in.read(cache)) != -1) {
                    out.write(cache, 0, length);
                }
                out.flush();
                if (out != null) {
                    out.close();
                }
                if (in != null) {
                    in.close();
                }

            }

        }

        return fileName;

    }

    private static String getFileName(Part part) {
        String header = part.getHeader("Content-Disposition");
        String fileName = header.substring(header.indexOf("filename=\"") + 10, header.lastIndexOf("\""));
        header.lastIndexOf("\"");
        return fileName;
    }
}

2。FileHelper
主要功能是为插入的图片重命名，也可根据需求添加如计算大小等等
代码如下：

package com.dsg.dbmonitor.utils;


import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

public final class FileHelper {

    public static String generateFileName(String fileName,String oldname) {
        System.out.println("这个name是个啥");
        System.out.println(fileName);
        DateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
        format.format(new Date());

        new Random().nextInt(10000);
        int position = fileName.lastIndexOf(".");
        String extension = fileName.substring(position);

        return oldname + extension;
    }

}

图片插入结束后，跳转回本页面。

尛尛鸟
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootstrapFileInput 图片上传插件 详解
12-23
插件描述：支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能. 参考示例：http://www.jq22.com/jquery-info5231
本地图片上传回显
08-22
本地图片默认在文本框中展示暂无图片 上点击上传的时候展示上传后的图片回显 多个图片上传以及单个图片上传回显
单张图片上传表单提交
u013111003的博客
08-03 1330
freemarker 简洁大气快速登录注册模板 function preview(file){ var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]){ var reader = new FileReader
上传头像或单张图片并预览
西风XF的博客
06-26 2573
实现效果：上传头像或者上传单张图片并预览； 知识点： input标签里面的 accept属性  是限制选择文件的格式； FileReader是HTML5的本地预览图片接口 onloadstart函数  数据开始读取时触发 onload函数  数据读取成功完成时触发 onloadend 数据读取完成时触发，无论成功失败 代码： #oDiv{
单张上传图片的方法
jdBug
07-09 428
1： <div class="pclogo"> <img v-show="!fileimg" src="@/assets/img/zheng@2x.png" alt="正面" class="pic"> <img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面"> &l...
webuploader上传单张图片
07-19
本文将深入探讨如何利用WebUploader实现单张图片的上传功能。 ### 1. WebUploader的引入 首先，我们需要在HTML文件中引入WebUploader的CSS样式表和JavaScript库。通常，可以从CDN或本地文件系统中引入： ```html ...
java代码实现多张图片单张图片文件上传_DEMO_图片上传_
10-02
本DEMO主要展示了如何实现单张或多张图片文件的上传功能。以下将详细讲解涉及的知识点。 1. **文件I/O操作**：在Java中，进行文件上传首先需要处理的是本地文件的读取。`java.io.File`类用于表示文件对象，可以获取...
单张图片上传压缩
09-19
本文将深入探讨“单张图片上传压缩”的相关知识点。 1. **图片格式与压缩原理** - 常见的图片格式有JPEG、PNG、GIF等，其中JPEG适用于照片类图像，因为它支持有损压缩，能显著减小文件大小。PNG则适合图标、设计稿...
手写单张图片上传ssh
05-20
在这个场景中，使用jsp（JavaServer Pages）作为前端页面，action（可能是Struts2框架中的Action类）作为后端控制器来实现图片上传至SSH（Secure Shell）服务器。SSH是一种网络协议，常用于安全地远程登录到服务器，...
Html5实现单张、多张图片上传功能
01-19
上面说到的这些插件，今天我们不谈，我们来看一看使用HTML5中的FileReader 如何实现 图片的单张及多张预览、删除、上传等功能。先看下实现后的效果如下： 2|0实现 2|1前端部分 这块是用户点击按钮 其中我们最重要...
单张图片上传与多张图片上传
05-21
为ios开发爱好者，解决难题。单张图片上传与多张图片上传。
单张图片上传并预览功能
weixin_44795226的博客
08-18 304
简单的图片上传功能前端jsp页面页面展示后端springmvcUploadController 类 前端jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head&g...
单张图片上传与回显
高振的博客
08-19 1398
js代码：   /**              * 上传并回显轮播图              * @returns              */             doUpload:function(){                 var formData = new FormData($("#uploadForm")[0]);
上传单张、多张图片demo示例
`宝子的博客
06-05 4293
上传单张、多张图片demo示例
上传单张图片并回显预览图
weixin_33686714的博客
04-01 552
网站上录入个人信息、添加商品时通常都会涉及上传图片，上传之后马上就可以预览图片，用户体验非常棒 <script type="text/javascript"> var dragImgUpload = new DragImgUpload("#drop_area",{ callback:function (files) { //回调函数，可以传递给后台等等 var file =...
上传单张图片
zqwqiao的博客
02-18 409
上传单张图片
【工具】vue 图片上传(单张/多张)
代码随想录
08-18 2196
本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/ 环境： vue@2.6.12 element-ui@2.15.3 1.图片上传(单张) 组件： //components/ImageUpload <template> <div class="component-upload-image"> <el-upload accept=".png,.jpg,.jpeg" ..
上传单张/多张照片时,问题总结
Stone.鱼儿的博客
01-19 981
最近写上传照片时出现不少问题，今天把这些问题总结下，方便日后使用 问题：1.一个对象中有个属性是头像，之前是一个字段一个字段传值，这样都OK，但是前端拼接url太麻烦，想着能不能传一个对象(字段不包含头像属性)，再传一个头像属性，但是各种报错，上网查找说是@RequestBody传对象时和MultipartFile无法共存 解决方法：一个接口这样无法实现他两共存的问题，那就写两个接口，一个接口...
h5页面图片上传
热门推荐
董盛姣
01-22 2万+
图片上传采用的是 input框的 type=file 的方式进行图片的上传。下面三种样式都是 input方式进行图片上传的。 我们点击上传图片的时候，图片上传到后台。首先给大家一个单张图片上传的示例 html: div class="z_file1"> "file" name="file" id="file_more1" value="" a
基于JSP的高校信息资源共享平台
最新发布
heye0910032的博客
07-22 466
高校信息资源共享平台的开发和实现，为高校信息资源的管理和共享提供了一个有效的解决方案。通过使用JSP技术和MySQL数据库，本系统实现了一个稳定、安全、易用的高校信息资源管理平台。虽然在开发过程中遇到了一些技术挑战，但通过不断学习和实践，最终完成了一个能够满足用户需求的系统。未来，我们将继续优化系统功能，提升用户体验，以期达到更高的应用价值和社会效益。高校信息资源共享平台的开发和实现，为高校信息资源的管理和共享提供了一个有效的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值