jqgrid编辑行时上传图片，使用webuploader结合c# mvc的方式

2019独角兽企业重金招聘Python工程师标准>>>

今天要解决的问题是，jqgrid编辑行时，点击某一列的上传按钮可以上传图片，点击查看可以查看图片。

1、怎么实现列表的图片上传

（1）先在列表加上两个按钮，一个图片上传和一个图片查看

     label: "图片上传", name: "", width: 90, align: "center",
      formatter: function (value, grid, rows, state) {
      var itemNumber = rows.itemNumber;
      var url = rows.tc_yyx21;
      var uploadImg = "uploadImgForm('" + url + "')";
      var checkImg = "checkImgForm('" + url + "')";
     return '<input id="itemNumber' + itemNumber + '" type="button" name="uploadImg" value="上传"  onclick="' + uploadImg + '"/>' +
      '<input id="itemNumber' + itemNumber + '" type="button" name="checkImg" value="查看"  onclick="' + checkImg + '"/>';
          }

（2）点击上传，打开上传图片窗口。点击查看，打开查看图片窗口

   //上传图片
        function uploadImgForm(url) {
            $.fn.modalOpen({
                id: "uploadImgForm",
                title: '上传图片',
                url: '/ProductManage/MainTainIn/uploadImgForm?url=' + url,
                width: "500px",
                height: "300px",
                callBack: function (iframeId) {
                    top.frames[iframeId].uploadImgBack(); //回调form表单函数
                }
            });
        }

        //查看图片
        function checkImgForm(url) {
            $.fn.modalOpen({
                id: "uploadImgForm",
                title: '查看图片',
                url: '/ProductManage/MainTainIn/checkImgForm?url=' + url,
                width: "500px",
                height: "300px",
                callBack: function (iframeId) {
                    top.frames[iframeId].checkImgFormBack(); //回调form表单函数
                }
            });
        }

（3）开始上传图片

一直提示 jQuery or Zepto not found!是因为没引用jquery。

上传页面的前端用官网的demo就够了，如下所示：

 < script src = "~/Content/plugins/webuploader-0.1.5/jquery.js" > </script>
  < link href = "~/Content/plugins/webuploader-0.1.5/webuploader.css" rel = "stylesheet" /  >
  < script src = "~/Content/plugins/webuploader-0.1.5/webuploader.js" >  <  / script >
  <div id = "uploader-demo" >
     < div id = "filePicker" > 选择图片 <  / div >
     < !--用来存放item-- >
     < div id = "fileList" class = "uploader-list" >  <  / div >
     <  / div >
     < script type = "text/javascript" >
         var $ = jQuery,
          $list = $('#fileList'),
         // 优化retina, 在retina下这个值是2
         ratio = window.devicePixelRatio || 1,

         // 缩略图大小
        thumbnailWidth = 90 * ratio,
        thumbnailHeight = 90 * ratio,

        // Web Uploader实例
        uploader;

     var uploader = WebUploader.create(
     {
        
        // 选完文件后，是否自动上传。
        auto : true,
        
        //验证文件总数量, 超出则不允许加入队列
        fileNumLimit : 2,
        
        // swf文件路径
        swf : '~/Content/plugins/webuploader-0.1.5/Uploader.swf',
        
        // 文件接收服务端。
        server : '/ProductManage/MainTainIn/UpLoadProcess',
        
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick : '#filePicker',
        
        // 只允许选择图片文件。
        accept :
        {
            title : 'Images',
            extensions : 'gif,jpg,jpeg,bmp,png',
            mimeTypes : 'image/*'
        }
    });

   uploader.on('fileQueued', function (file)
   {
       var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'),
    $img = $li.find('img');
    
    // $list为容器jQuery实例
    $list.append($li);
    
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb(file, function (error, src)
    {
        if (error)
        {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        
        $img.attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
});

// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage)
{
    var $li = $('#' + file.id),
    $percent = $li.find('.progress span');
    
    // 避免重复创建
    if (!$percent.length)
    {
        $percent = $('<p class="progress"><span></span></p>')
            .appendTo($li)
            .find('span');
    }
    
    $percent.css('width', percentage * 100 + '%');
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file)
{
    $('#' + file.id).addClass('upload-state-done');
});

// 文件上传失败，显示上传出错。
uploader.on('uploadError', function (file)
{
    var $li = $('#' + file.id),
    $error = $li.find('div.error');
    
    // 避免重复创建
    if (!$error.length)
    {
        $error = $('<div class="error"></div>').appendTo($li);
    }
    
    $error.text('上传失败');
});

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function (file)
{
    $('#' + file.id).find('.progress').remove();
});
</script >

C#后台代码如下：这个是从网上找的代码：

      static string urlPath = string.Empty;
        public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
        {

            string filePathName = string.Empty;

            string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
            if (Request.Files.Count == 0)
            {
                return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
            }

            string ex = Path.GetExtension(file.FileName);
            filePathName = Guid.NewGuid().ToString("N") + ex;
            if (!System.IO.Directory.Exists(localPath))
            {
                System.IO.Directory.CreateDirectory(localPath);
            }
            file.SaveAs(Path.Combine(localPath, filePathName));

            return Json(new
            {
                jsonrpc = "2.0",
                id = id,
                filePath = urlPath + "/" + filePathName
            });

        }

参考地址如下： http://fex.baidu.com/webuploader/getting-started.html

http://download.csdn.net/download/terryda/9475429#

转载于:https://my.oschina.net/u/2427561/blog/1539497