zoukankan      html  css  js  c++  java
  • 上传系列:ajaxupload.js

    ajaxupload.js

    上次说了jquery.upload.js,这次再说一下ajaxupload.js,这个其实也比较简答,只有一个JS文件:

    html代码:

     1 $(function () {
     2         var btnUpload = $('#upload');
     3         new AjaxUpload(btnUpload, {
     4             action: '/System/Upload',               //上传地址
     5             name: 'uploadfile',                     //文件域名字
     6             onSubmit: function (file, ext) {        //上传之前的操作  
     7                 if (!(ext && /^(jpg|gif|jpeg|png)$/.test(ext))) {
     8                     $.messager.alert('提示', '亲,请选择jpg、png、gif、jpeg图片!');
     9                     return false;
    10                 }
    11                 var ele = $(".imglist li");
    12                 if (ele.length >= 5) {
    13                     $.messager.alert('提示', '亲,最多上传五张图片!');
    14                     return false;
    15                 }
    16             },
    17             onComplete: function (file, response) {  //上传完毕后的操作(response服务器返回的信息)  
    18                 var html = '<li><span><img src="' + response + '"/><p>';
    19                 if ($(".imglist").find('li').length > 0) {
    20                     html += '<input type="radio" name="img"  value="' + response + '" />';
    21                 } else {
    22                     html += '<input type="radio" name="img"  value="' + response + '" checked="checked" />';
    23                 }
    24                 html += '<a href="javascript:void(0)" onclick="defimg(this)">主图</a>|<a href="javascript:void(0)" onclick="delimg(this)">删除</a>';
    25                 html += '</p></span></li>';
    26                 $('.imglist').append(html);
    27             }
    28         });
    29     });
    View Code

    后台代码和jquery.upload.js的差不多,但是有一点需要注意,这个ajaxupload.js在后台接受文件的时候,比如后台方法:

    1 public ActionResult Upload(HttpPostedFileBase FileData)
    2         {
    3            
    4         }
    View Code

    MVC不会直映射到,所以比较坑人的地方出现了,我们需要通过代码,再获取上传文件

    1 public ActionResult Upload(HttpPostedFileBase FileData)
    2         {
    3             FileData = Request.Files["uploadfile"];
    4         }
    View Code
  • 相关阅读:
    vue的特点 关键字
    小程序技术实现
    SpringCloud简历模板
    SpringBoot简历模板
    SpringCloud+Eureka快速搭建微服架构
    Docker 面试题
    说说mysql的存储引擎,有什么区别?索引的介绍
    mysql语句
    fail-fast 与 fail-save 机制的区别
    动态规划总结
  • 原文地址:https://www.cnblogs.com/jiaxa/p/3926852.html
Copyright © 2011-2022 走看看