ajax ajaxFileUpload 文件(图片)上传

最新推荐文章于 2023-02-17 15:03:02 发布

csdnguo

最新推荐文章于 2023-02-17 15:03:02 发布

阅读量630

点赞数

CC 4.0 BY-SA版权

分类专栏： web 开发文章标签： upload 图片

本文链接：https://blog.youkuaiyun.com/csdnguo/article/details/39550147

web 开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种前端图片上传验证方法，确保上传的文件格式符合要求，并通过Ajax实现了与后台的交互，完成图片的服务器端验证及存储。此外，还提供了后端控制器代码，详细展示了如何保存上传的文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

query 验证图片的格式代码如下：
<script type="text/javascript">

function img() {

var str = $("#fileName").val();

var pos = str.lastIndexOf(".");

var lastname = str.substring(pos, str.length);

if (lastname.toLowerCase() != ".jpg" && lastname.toLowerCase() != ".jpeg" && lastname.toLowerCase() != ".gif" && lastname.toLowerCase() != ".bmp" && lastname.toLowerCase() != ".png") {

alert("您上传的文件类型为" + lastname + ",图片必须为.jpg,.jpeg,.gif,.bmp,.png类型")

return false;

}

else {

return true;

}

</script>

注意：要是验证大小的话，我建议还是去后台验证吧。前台还要判断浏览器的种类，版本。况且还有些属性浏览器不支持。

<input type="file" name="fileToUpload" id="fileToUpload" onchange="upload()"/>

注意：使用jquery的ajaxFileUpload 上传是要使用name 和 id 属性的；

首先看看js 前台代码怎么实现:
<script type="text/javascript">
function upload() {
       //alert($('#vfile').val());
       //if(__.checkFile()==false) return;
       $.({
           url:'/application/checkPic.do', //需要链接到服务器地址
             fileElementId:'fileToUpload',                        //文件选择框的id属性
             dataType: 'text',                                     //服务器返回的格式，可以是json
             success: function (data, status){            //相当于java中try语句块的用法
               var data=eval("("+data+")");//转换为json对象
               if(data.result =="1"){
                   $('#photo').val(data.obj);
                   $("#img").attr("src", '<%=basePath %>' + data.obj);
                   $("#img").show();
                   return true;
               }
               if(data.result =="2"){
                   $.messager.alert('系统提示','图片必须为jpg、jpeg、gif、bmp、png类型！');
                    $('#fileToUpload').val('');
                    return false;
               }
               if(data.result =="3"){
                   $.messager.alert('系统提示','图片过大,不能超过1M！');
                    $('#fileToUpload').val('');
                    return false;
                }
             },
             error: function (data, status, e)            //相当于java中catch语句块的用法
             {
             }
         });
   },
</script>

controller 源码奉上：
    /**
   *
   * 描述保存上传文件
   * @author guochenglin
   * @createDate 2014-8-28
   * @param path
   * @param file
   * @return
   * @throws IllegalStateException
   * @throws IOException
   */
   public static Object[] saveUploadFile(String path, MultipartFile file)
           throws IllegalStateException, IOException {
       Object[] obj = new Object[2];
//       if (file == null)
//           return "";
       String flag = "";
        String fileName = file.getOriginalFilename();
      //扩展名
        String suffixName = fileName.substring(fileName.lastIndexOf("."),fileName.length());
       String name = System.currentTimeMillis()+suffixName;
       //图片大小
       Long fileSize = file.getSize();
       File targetFile = new File(path, name);
       //验证格式
          List<String> fileTypes = new ArrayList<String>();
          fileTypes.add(".jpg");
          fileTypes.add(".jpeg");
          fileTypes.add(".bmp");
          fileTypes.add(".gif");
          fileTypes.add(".png");
          if(fileTypes.contains(suffixName.toLowerCase()) && fileSize <=1024*1024 ){
              if(!targetFile.exists())
               targetFile.mkdirs();
               file.transferTo(targetFile);
                 flag="1";
          }else if(!fileTypes.contains(suffixName.toLowerCase())){
              flag="2";
          }else if(fileSize>1024*1024){
              flag="3";
          }
          obj[0] =flag;
          obj[1] =name;
       return obj;
   }