jqgrid編輯行時上傳圖片，使用webuploader結合c# mvc的方式

今天要解決的問題是，jqgrid編輯行時，點擊某一列的上傳按鈕能夠上傳圖片，點擊查看能夠查看圖片。

一、怎麼實現列表的圖片上傳

（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#