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

摘要: 每日一搏

今天要解决的问题是，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#