1、准备工作:定义一个input标签,type=file,让它隐藏,用一个lable标签设置它的for属性指向这个input,这样就可以通过设置lable的格式,达到文件上传的功能。还需要定义一个img标签,用来接收上传的图片。
2、图片显示在前端页面:在Js中设置该input的change事件,原理就是将图片的盘符形式的地址换成http形式的地址,将该地址赋值给img的src属性,并让其显示。
3、发送给服务器:通过form表单提交给服务器,第一需要设置formenctype=multipart/form-data,第二需要设置input的name属性,传一个参数即可。
使用一些已有的组件帮助我们实现这种上传功能。常用的上传组件:Apache 的 Commons FileUploadJavaZoom的UploadBeanjspSmartUpload以下,以FileUpload为例讲解1、在jsp端<form id="form1" name="form1" method="post" action="servlet/fileServlet" enctype="multipart/form-data">要注意enctype="multipart/form-data"然后只需要放置一个file控件,并执行submit操作即可<input name="file" type="file" size="20" ><input type="submit" name="submit" value="提交" >2、web端核心代码如下:public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8") DiskFileItemFactory factory = new DiskFileItemFactory() ServletFileUpload upload = new ServletFileUpload(factory) try { List items = upload.parseRequest(request) Iterator itr = items.iterator() while (itr.hasNext()) {FileItem item = (FileItem) itr.next()if (item.isFormField()) { System.out.println("表单参数名:" + item.getFieldName() + ",表单参数值:" + item.getString("UTF-8"))} else { if (item.getName() != null &&!item.getName().equals("")) { System.out.println("上传文件的大小:" + item.getSize()) System.out.println("上传文件的类型:" + item.getContentType()) System.out.println("上传文件的名称:" + item.getName()) File tempFile = new File(item.getName()) File file = new File(sc.getRealPath("/") + savePath, tempFile.getName()) item.write(file) request.setAttribute("upload.message", "上传文件成功!") }else{ request.setAttribute("upload.message", "没有选择上传文件!") }} } }catch(FileUploadException e){ e.printStackTrace() } catch (Exception e) { e.printStackTrace() request.setAttribute("upload.message", "上传文件失败!") } request.getRequestDispatcher("/uploadResult.jsp").forward(request, response) }1、安装插件程序【方正影像采集插件安装包_I_v3.0.74.0.exe】2、根据技术人员提供的HTMLdemo进行开发
增加摄像预览控件,客户不需要预览,因此我进行了隐藏
增加按钮事件方法,另外由于初始化需要一定的时间,技术人员说是3秒,因此我设置了一个等待3秒再执行拍摄的方法。最后得到图像的Base64字符流传至后台进行上传到服务器
commonServices.ashx 文件上传图片方法
欢迎分享,转载请注明来源:夏雨云
评论列表(0条)