图片上传

ゝ一世哀愁。 2022-04-02 11:46 514阅读 0赞

文件上传流程:
1、定义

2、点击上传区域,触发打开选择框:

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

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

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

  1. function uploadimage(fileThis){
  2. var fileObj = $(fileThis)[0].files[0];
  3. var type = $(fileThis).data("type")
  4. if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
  5. return;
  6. }
  7. var formFile = new FormData();
  8. formFile.append("upfile", fileObj); //加入文件对象
  9. formFile.append("type", type); //加入文件对象
  10. var action = basePath+"/user/platformInfo/uploadImage";
  11. $.ajax({
  12. url: action,
  13. data: formFile,
  14. type: "Post",
  15. cache: false,//上传文件无需缓存
  16. processData: false, 告诉jQuery不要去处理发送的数据
  17. contentType: false, //告诉jQuery不要去设置Content-Type请求头
  18. success: function (data) {
  19. if(data.code == "88"){ // 图片显示处理
  20. //$(fileThis).parents(".activsx").css({"background":"red"});
  21. var $activsx = $(fileThis).parents(".activsx");
  22. $($activsx).find(".del").css("display", "block"); // 显示删除样式
  23. $($activsx).find(".pic ").attr("src", data.data); // 将图片路径存入src中,显示出图片
  24. $($activsx).find(".pid").attr("src", data.data);
  25. }else{
  26. alert(data.message);
  27. }
  28. }
  29. })
  30. }
  31. @RequestMapping("/uploadImage")
  32. @ResponseBody
  33. public ProcessBack uploadImage(@RequestParam("upfile") MultipartFile multipartFile){
  34. String type = request.getParameter("type");
  35. PreCommonMember preCommonMember = getPreCommonMemberByHtml();
  36. ProcessBack processBack = attachUnusedService.uploadImage(multipartFile, preCommonMember.getUid(),type);
  37. return processBack;
  38. }
  39. public ProcessBack uploadImage(MultipartFile multipartFile, Long baseid, String type){
  40. ProcessBack processBack = new ProcessBack();
  41. try{
  42. if(StringUtil.isEmpty(type)){
  43. processBack.setCode(ProcessBack.FAIL_CODE);
  44. processBack.setMessage("type 不能为空");
  45. return processBack;
  46. }
  47. //上传原图&&缩率图
  48. Map<String,String> imageUploadMap = fastDFSUploadComponent.uploadDefaultFile(multipartFile);
  49. if(imageUploadMap.get(FastDFSUploadComponent.FDFS_STATE).equals(FastDFSUploadComponent.FDFS_FAIL_STATUS)){//图片上传失败
  50. throw new IllegalArgumentException("图片上传失败");
  51. }
  52. String url = (String) imageUploadMap.get(FastDFSUploadComponent.FDFS_URL);//原图路径
  53. System.out.println(url);
  54. //保存平台附件表
  55. PlatformInfoAttachUnused attachment = new PlatformInfoAttachUnused();
  56. attachment.setUid(baseid);//用户id
  57. attachment.setType(Integer.valueOf(type));//图片类型
  58. attachment.setIsuse(0);//是否使用1是0否
  59. attachment.setPno("0");//
  60. attachment.setAttachment(url);//图片路径
  61. int count = 0;
  62. count = baseMapper.insert(attachment);
  63. if(!(count > 0)){
  64. throw new IllegalArgumentException("附件索引记录保存失败");
  65. }
  66. processBack.setCode(ProcessBack.SUCCESS_CODE);
  67. processBack.setMessage("图片上传成功");
  68. processBack.setData(fastDFSUploadComponent.getResAccessUrl(url));
  69. return processBack;
  70. }catch(RuntimeException e){
  71. e.printStackTrace();
  72. TransactionAspectSupport.currentTransactionStatus().setRollbackOnly();//数据回滚
  73. }catch(Exception e){
  74. e.printStackTrace();
  75. }
  76. processBack.setCode(ProcessBack.FAIL_CODE);
  77. processBack.setMessage(ProcessBack.EXCEPTION_MESSAGE);
  78. return processBack;
  79. }
  80. <img id='pImg' src='"+data.data+"'/>
  81. var logo = $("#pImg").attr("src"); // 这样获取图片路径更有效

发表评论

表情:
评论列表 (有 0 条评论,514人围观)

还没有评论,来说两句吧...

相关阅读

    相关 图片

    上篇博客已经介绍了文件的上传,这次就简单总结一下图片的上传,以及上传图片的显示。 利用三个控件:Input(File)、Button控件、Image控件,页面简单设计如下图:

    相关 图片

    开发工具与关键技术:Visual Studio 作者:肖广斌 撰写时间:2019年5月12日 在做项目时,我们在完善一些个人信息、或者一些页面时,我们需要用到图片,