zoukankan      html  css  js  c++  java
  • Uploadify在MVC中使用方法案例(上传单张图片)

    在View视图中:

    <link href="/Scripts/uploadify-v3.2.1/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/uploadify-v3.2.1/jquery.uploadify.js" type="text/javascript"></script>
    <script src="/Scripts/uploadify-v3.2.1/swfobject.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#file_upload').uploadify({
                'buttonText': '选择上传文件',
                'queueID': 'fileQueue',//指定上传进度条在哪里显示
                'swf': '@Url.Content("~/Scripts/uploadify-v3.2.1/uploadify.swf?ver='+Math.random()+'")',
                'uploader': '/Home/Upload',
                'removeCompleted': true,
                'checkExisting': true,
                'fileTypeDesc': '上传的文件类型',
                'fileTypeExts': '*.jpg;*.png;*.gif',
                'fileSizeLimit': '1024kb',
                'auto': false,
                'multi': false,
                'queueSizeLimit': 1,                   //一个队列上传文件数限制  
                'uploadLimit': 1,                     //允许上传的最多张数   
                'height': 30,
                'width': 80,
                'onUploadSuccess': function (file, data, response) {
                    var obj = jQuery.parseJSON(data); //把返回的Json序列转化为obj对象
                    if (obj.Success) {
                        $('#input').val(obj.FilePath);
                        $('#upsucc').text('上传成功!');
                    }
                    else
                        alert(obj.Message);
                }
            });
        });
    

      

     <tr>
                    <th>@Html.LabelFor(model=>model.Url)</th>
                    <td>
                     <input type="file" class="file_upload" id="file_upload"/>
                     <div id="fileQueue"></div>
                     <a href="javascript:$('#file_upload').uploadify('upload');">上传</a><span id="upsucc" style="color:red"></span>
                      @Html.TextBoxFor(m => m.Url, new { id="input",@style="display:none"})
                    </>
                   </tr>

    Controller中

     [HttpPost]
            public JsonResult Upload(HttpPostedFileBase fileData)
            {
                if (fileData != null)
                {
                    try
                    {
                        // 文件上传后的保存路径
                        string filePath = Server.MapPath("~/Uploads/");
                        if (!Directory.Exists(filePath))
                        {
                            Directory.CreateDirectory(filePath);
                        }
                        string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
                        string fileExtension = Path.GetExtension(fileName); // 文件扩展名
                        string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
                        int filesize = fileData.ContentLength / 1024;
                        if (filesize > 1024 || filesize <= 2 || (fileExtension != ".jpg" && fileExtension != ".png" && fileExtension != ".gif"))
                        {
                            return Json(new { Success = false, Message = "上传失败!
    请上传jpg/png格式图片,文件大小不要超过1MB" }, JsonRequestBehavior.AllowGet);
    
                        }
                        else
                        {
                            fileData.SaveAs(filePath + saveName);
                            return Json(new { Success = true, FilePath = "/Uploads/" + saveName });
                        }
    
                    }
                    catch (Exception ex)
                    {
                        return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
                    }
                }
                else
                {
                    return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
                }
            }

    在后台应用中会遇到HTTP 302的错误  这是因为应用插件的过程中 没有了session  所以public JsonResult Upload(HttpPostedFileBase fileData) 最好放到一个没有访问权限的Controller中!

  • 相关阅读:
    vue 高度 动态更新计算 calcHeight watch $route
    vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
    vue 异步请求数据后,用v-if,显示组件,这样初始化的值就在开始的时候传进去了
    vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
    vue render {} 对象 说明文档
    params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
    upload 上传按钮组件 iview
    下拉列表事件 Dropdown iview
    this.treeData = JSON.parse(JSON.stringify(this.d)) 树的序列化反序列化
    tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加
  • 原文地址:https://www.cnblogs.com/yechangzhong-826217795/p/3785842.html
Copyright © 2011-2022 走看看