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