图片上传

最新推荐文章于 2024-10-27 16:00:56 发布

帅杰IT大神

最新推荐文章于 2024-10-27 16:00:56 发布

阅读量202

点赞数

CC 4.0 BY-SA版权

分类专栏：技术类文章标签：图片上传

本文链接：https://blog.youkuaiyun.com/qzc2017/article/details/85263436

技术类专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何通过前端和后端技术实现文件上传功能，包括定义上传输入字段、触发文件选择、处理上传过程及图片服务器响应，最后保存图片路径至数据库。同时，展示了具体的JavaScript和Java代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件上传流程：
1、定义 <input type="file" name="file" accept="image/*" onchange="uploadimage(this)" data-type="6" class="upload" style="display: none">

2、点击上传区域，触发打开选择框：

$("#uploader").click(function(){
$(".upload").click(); // 打开文件选择窗口，若点击会直接打开，则无需此代码
});

3、后台处理上传至图片服务器，返回图片地址，显示

4、获取图片路径，保存路径到数据库

function uploadimage(fileThis){
    var fileObj = $(fileThis)[0].files[0];
    var type = $(fileThis).data("type")
    if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
        return;
    }
    var formFile = new FormData();
    formFile.append("upfile", fileObj); //加入文件对象
    formFile.append("type", type); //加入文件对象
    var action = basePath+"/user/platformInfo/uploadImage";
    $.ajax({
        url: action,
        data: formFile,
        type: "Post",
        cache: false,//上传文件无需缓存
        processData: false,//// 告诉jQuery不要去处理发送的数据
        contentType: false, //告诉jQuery不要去设置Content-Type请求头
        success: function (data) {
            if(data.code == "88"){  // 图片显示处理
                //$(fileThis).parents(".activsx").css({"background":"red"});
                var $activsx = $(fileThis).parents(".activsx");
                $($activsx).find(".del").css("display", "block"); // 显示删除样式
                $($activsx).find(".pic ").attr("src", data.data); // 将图片路径存入src中，显示出图片
                $($activsx).find(".pid").attr("src", data.data);

            }else{
                alert(data.message);
            }
        }
    })
}

@RequestMapping("/uploadImage")
@ResponseBody
public ProcessBack uploadImage(@RequestParam("upfile") MultipartFile multipartFile){
    String type = request.getParameter("type");
    PreCommonMember preCommonMember =  getPreCommonMemberByHtml();
    ProcessBack processBack = attachUnusedService.uploadImage(multipartFile, preCommonMember.getUid(),type);
    return processBack;
}

public ProcessBack uploadImage(MultipartFile multipartFile, Long baseid, String type){
    ProcessBack processBack = new ProcessBack();
    try{
        if(StringUtil.isEmpty(type)){
            processBack.setCode(ProcessBack.FAIL_CODE);
            processBack.setMessage("type 不能为空");
            return processBack;
        }
        //上传原图&&缩率图
        Map<String,String> imageUploadMap = fastDFSUploadComponent.uploadDefaultFile(multipartFile);
    if(imageUploadMap.get(FastDFSUploadComponent.FDFS_STATE).equals(FastDFSUploadComponent.FDFS_FAIL_STATUS)){//图片上传失败
            throw new IllegalArgumentException("图片上传失败");
        }
        String url = (String) imageUploadMap.get(FastDFSUploadComponent.FDFS_URL);//原图路径
        System.out.println(url);
        //保存平台附件表
        PlatformInfoAttachUnused attachment = new PlatformInfoAttachUnused();
        attachment.setUid(baseid);//用户id
        attachment.setType(Integer.valueOf(type));//图片类型
        attachment.setIsuse(0);//是否使用1是0否
        attachment.setPno("0");//
        attachment.setAttachment(url);//图片路径
        int count = 0;
        count = baseMapper.insert(attachment);
        if(!(count > 0)){
            throw new IllegalArgumentException("附件索引记录保存失败");
        }
        processBack.setCode(ProcessBack.SUCCESS_CODE);
        processBack.setMessage("图片上传成功");
        processBack.setData(fastDFSUploadComponent.getResAccessUrl(url));
        return processBack;
    }catch(RuntimeException e){
        e.printStackTrace();
        TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();//数据回滚
    }catch(Exception e){
        e.printStackTrace();
    }
    processBack.setCode(ProcessBack.FAIL_CODE);
    processBack.setMessage(ProcessBack.EXCEPTION_MESSAGE);
    return processBack;
}

<img id='pImg' src='"+data.data+"'/>

var logo = $("#pImg").attr("src");   // 这样获取图片路径更有效