记录-Jquery uploadify文件上传实例

使用JQuery Uploadify实现文件上传

最新推荐文章于 2025-09-08 17:59:21 发布

1361976860

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dscs/p/5259239.html

本文介绍如何使用JQuery Uploadify插件实现文件上传功能。通过具体代码示例展示了必要的JS和HTML配置，包括文件类型限制、上传按钮文本等设置。同时提供了后台Java处理代码，用于接收上传的文件。

原本做的是from表单的文件上传,后来因需要用ajax异步,so接触到了Jquery uploadify上传

贴上代码,以供参考

需要引入的js文件

    <link href="../res/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="../res/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>

下面是HTML代码

 <input type="file" id="file" name="file"  />

下面是Jquery代码

下面蓝色部分没用

$("#file").uploadify({
              height: 14,            
              swf: '/res/uploadify/uploadify.swf',
              uploader: '../member/getAllByExcel',
              width: 100,
              fileTypeExts: '*.xls',
              errorMsg: "不支持文件格式",
              buttonText:"Excel上传",
              multi :false,
              onUploadSuccess: function (file,data ,state) {        
                     var jsonData =$.parseJSON(data.replace(/\\/g,"\\\\"));    
                     if(data.msg){
                         alert(unescape(data.msg));
                         return;
                     }
                     $.appendMainPic(jsonData.images[0].url,jsonData.images[0].id);                
                      var orgValue =  $("#Card_Pic_mainPic").val()+"";
                      orgValue+=","+jsonData.images[0].id;
                      $("#Card_Pic_mainPic").val(orgValue);                            
                   },
                   onQueueComplete  :function(a,b,c){}
       });

下面是后台代码

@RequestMapping(value="getAllByExcel" ,method = RequestMethod.POST)
    public Object getAllByExcel(HttpServletRequest request,HttpServletResponse response, ModelMap model){
        Map<String, Object> resMap=new HashMap<String, Object>();
        MultipartHttpServletRequest mulltipartRequest=(MultipartHttpServletRequest)request;
        
        Map<String, MultipartFile> fileMap = mulltipartRequest.getFileMap();
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
            MultipartFile files = entity.getValue();
            //MultipartFile mf = entity.getValue();
            String path=request.getSession().getServletContext().getRealPath("/WEB-INF/res/upload");
            String fileName=files.getOriginalFilename();
            
            try {
                
              InputStream inputStream=files.getInputStream();
                
                byte[] b = new byte[1048576];
                int length = inputStream.read(b);
                path += "\\" + fileName;
                // 文件流写到服务器端
                FileOutputStream outputStream = new FileOutputStream(path);
                outputStream.write(b, 0, length);
                inputStream.close();
                outputStream.close();
              
                
                
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        
        //MultipartFile files=mulltipartRequest.getFile(null);
        //得到上传服务器路径
        resMap.put("msg", "录入成功");
        return resMap;
    }