• SpringMVC与uploadify结合进行上传


    uploadify是一个第三方js插件,支持多文件上传,拥有较为强大的上传功能
    1、uploadify实现
    下载其flash版本
    解压后将其内容区分后倒入
    将jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png导入到项目中,注意路径,路径不对可能导致取消图片的显示失败
    在页面中引入jquery与jquery.uploadify.min.js,css
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
    <link href="${pageContext.request.contextPath}/statics/js/uploadify/uploadify.css" rel="stylesheet"
    type="text/css"/>
    <script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.js"
    type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.min.js"
    type="text/javascript"></script>

    初始化页面并使用
    1. $(function () {
    2. $("#uploadify").uploadify({
    3. //指定swf文件
    4. 'swf': '${pageContext.request.contextPath}/statics/js/uploadify/uploadify.swf',
    5. //后台处理的页面
    6. 'uploader': '${pageContext.request.contextPath}/background/questionResolveUpload',
    7. //按钮显示的文字
    8. 'buttonText': '选择文件',
    9. //显示的高度和宽度,默认 height 30;width 120
    10. //'height': 15,
    11. //'width': 80,
    12. //上传文件的类型 默认为所有文件 'All Files' ; '*.*'
    13. //在浏览窗口底部的文件类型下拉菜单中显示的文本
    14. 'fileTypeDesc': 'ALL Files',
    15. // 'fileTypeDesc': 'ALL Files',
    16. //允许上传的文件后缀
    17. // 'fileTypeExts': '*.gif; *.jpg; *.png',
    18. //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
    19. //'queueID': 'fileQueue',
    20. //选择文件后自动上传
    21. queueSizeLimit: 999,
    22. 'auto': false,
    23. //设置为true将允许多文件上传
    24. 'multi': true,
    25. "onUploadSuccess": function (file, data, response) {
    26. // alert('The file ' + file.name
    27. // + ' was successfully uploaded with a response of '
    28. // + response + ':' + data);
    29. dataJson = eval("(" + data + ")");
    30. // 上传后消息回复
    31. resolveResult(dataJson.messageContent, file.name);
    32. },
    33. "onUploadError": function (file, errorCode, errorMsg,
    34. errorString) {
    35. // 插件出现错误时的问题
    36. alert('The file ' + file.name
    37. + ' could not be uploaded: ' + errorString);
    38. },
    39. "onSelectError": function () {
    40. alert('The file ' + file.name
    41. + ' returned an error and was not added to the queue.');
    42. },
    43. 'onUploadStart': function () {
    44. $('#uploadify').uploadify('settings', 'formData', {
    45. "competition": $('#competition').val()
    46. });
    47. }
    48. });
    49. });

    请注意如果想要动态传输参数的话,请在onUploadStart方法中书写,而不是在配置的时候书写

    controller:
    1. public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {
    2. //解析文件
    3. RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();
    4. MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);
    5. //解析文件结束
    6. MessageCarrier messageCarrier = upload(multipartFile, path);
    7. return messageCarrier;
    8. }
    直接使用request进行接收后解析即可
    其余参数则使用
    1. request.getParameter("competition")
    来解析即可

    当uploadify进行多个文件上传的时候会多次向后台服务器发送请求,所以我们只需要按照单一文件解析即可


    属性默认值说明
    autotrue设置为true,当选择文件后就可以直接上传,为false需要点击上传按钮才上传。
    buttonClassempty String按钮样式,默认为空字符串。
    buttonCursor‘hand’鼠标指针悬停在按钮上的样式。
    buttonImagenull;浏览按钮的图片路径。
    buttonText‘SELECT FILES’浏览按钮的文本。3
    checkExistingfalse 文件上传重复性检查程序,检查即将上传的文件在服务器端是否已经存在,存在返回1,不存在返回0。
    debugfalse 如果设置为true,则表示启用SWFUpload的调试模式。
    fileObjName'‘Filedata’文件上传对象的名称,如果命名为the_files,PHP程序可以用$_FILES['the_files']来处理上传的文件对象。
    fileSizeLimit0上传文件的大小限制,如果为整数型,则表示以KB为单位的大小,如果是字符串,则可以使用(B、KB、MB、GB)为单位,比如2MB,如果设置为0则表示无限制。
    fileTypeDescAll Files 这个属性值必须设置fileTypeExts属性后才有效,用来设置选择文件对话框中的提示文本,如果设置fileTypeDesc为:请选择rar doc pdf文件等。
    fileTypeExts*.*设置可以选择的文件的类型,格式如:*.doc;*.pdf;*.rar。
    formData JSON格式上传每个文件的同时提交到服务器的额外数据,可在onUploadStart事件中使用settings方法动态设置。
    height30 设置浏览按钮的高度,默认值。
    itemTemplatefalse用于设置上传队列的HTML模板,可以使用以下标签:instanceID-Uploadify实例的ID,fileID队列中此文件的ID,或者理解为此任务的ID,fileName文件的名称,fileSize当前上传的文件大小
    methodPost提交方式Post或Get。
    multitrue 设置为true时可以上传多个文件。
    overrideEvents 设置哪些事件可以被重写,JSON格式,如:overrideEvents:['onUploadProgress']
    preventCachingtrue如果为true,则每次上传文件时自动加上一串随机字符串参数,防止URL缓存影响上传结果。
    progressData'percentage'设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度。
    queueIDfalse设置上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。
    queueSizeLimit999队列最多显示的任务数量,如果选择的文件数量超过此限制,将会发出onSelectError事件。此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。
    removeCompletedtrue 是否自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示。
    removeTimeout3如果设置了任务完成后自动从队列中删除,则可以规定从完成到被移除的时间间隔。
    requeueErrorsfalse如果设置为true,则单个任务上传失败后将返回错误,并重新加入任务队列上传。

    successTimeout30文件上传成功后,服务端返回成功标志,此项设置返回结果的超时时间。
    swf‘uploadify.swf’uploadify.swf文件的相对路径。
    uploaderuploadify.php/uploadify.action后台处理程序的相对路径。
    uploadLimit999最大上传文件数量,如果达到或者超出限制将会触发onUploadError事件。
    width120 设置文件浏览按钮的宽度。



    附件列表

    • 相关阅读:
      css3动画入门transition、animation
      vue入门教程 (vueJS2.X)
      web前端开发 代码规范 及注意事项
      树莓派 mongodb 安装&报错处理
      mongodb Failed to start LSB: An object/document-oriented dat
      js实现replaceAll功能
      mac for smartSVN9 (8,9)破解方法 附smartSvn_keygen工具图文
      js可视区域图片懒加载
      Hibernate基础知识
      Hibernate缓存策略
    • 原文地址:https://www.cnblogs.com/crowsong/p/6623661.html
    Copyright © 2020-2023  润新知