当前位置: 代码迷 >> 综合 >> 图片上传服务器的过程
  详细解决方案

图片上传服务器的过程

热度:108   发布时间:2023-10-02 03:49:24.0

准备工作

定义一个input标签,type=file,然后让他隐藏,用一个lable标签设置它的for属性指向这个input,这样就可以通过设置lable的格式,达到文件上传的功能

<label for="fileupload" class="updata_file">点击这里上传图片</label>
<input type="file" id="fileupload" style="display: none" name="upload">

还需要定义一个img标签,用来接收上传的图片

<img src="" id="imageview" style="display: none">

让图片显示在前端界面

在Js中设置该input的change事件,原理就是将图片的盘符形式的地址换成http形式的地址,再将该地址赋值给img的src属性,并让其显示。
// 原理是把本地图片路径:"D(盘符):/image/…"转为"http://…"格式路径来进行显示图片

$("#fileupload").change(function() {
    var $file = $(this);var objUrl = $file[0].files[0];//获得一个http格式的url路径:mozilla(firefox)||webkit or chromevar windowURL = window.URL || window.webkitURL;//createObjectURL创建一个指向该参数对象(图片)的URLvar dataURL;dataURL = windowURL.createObjectURL(objUrl);//把url给图片的src,让其显示$("#imageview").attr("src",dataURL);$('#imageview').attr("style","display:inline");
});

发送给服务器

通过form表单提交给服务器,第一需要设置formenctype=“multipart/form-data”,第二需要设置input的name属性,传一个参数

利用Struts2框架提供了接收图片的方法,需要接收三个参数。
第一个,文件名称,就是获取发送来的文件名称。private String uploadFileName;
第二个,是一个临时文件。private File upload;
第三个,文件类型。private String uploadContentType;
将图片从本地传到服务器,经历的过程就是先将图片生成一个临时文件存在C盘,然后再将这个临时文件拷贝到服务器。
调试:上传图片,打印这三个参数

  相关解决方案