1.先看看预览图

这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少我现在是这么认为的,下面看我的代码

  <table style="width: 1300px" id="J_PicRound">
@foreach (var item in SingleReproduct)
{
<tr>
<td style="width: 200px">
<input type="text" name="ReleProduct" value="@item.ReleProduct"/>
</td>
<td style="width: 400px">
<input type="text" name="ProTitle" class="required" value="@item.ProTitle" size=""/>(~14个字)
</td>
<td style="width: 200px">
<input type="text" name="ProUrl" class="required" value="@item.ProUrl" />
</td>
<td style="width: 100px">
<img src="http://image.uiyi.cn/singleproduct/@item.ProImgUrl" alt="" style="width:50px; height:30px"/>
</td>
<td style="width: 200px">
<input type="file" name="uploadnew@(item.ID)" id="uploadnew@(item.ID)" />
<input type="button" id="btn" class="uploadpara" dataid="uploadnew@(item.ID)" value="上传"/>
<input type="hidden" id="hidimg@(item.ID)" name="ProImgUrl" value="@item.ProImgUrl" />
</td>
<td style="width: 100px">
<a class="btn-del J_DelImageMap J_Del" href="javascript:;">删除</a>
</td>
</tr>
}
</table>

看我的jquery代码

<script type="text/javascript" language="javascript">
$(function () {
$(".uploadpara").click(function () {
var id = $(this).attr("dataid");
$("#" + id).uploadifySettings('scriptData', { 'id': id });
$('#' + id).uploadifyUpload();
});
$(".uploadparas").live("click", function () {
var id = $(this).attr("dataid");
$("#" + id).uploadifySettings('scriptData', { 'id': id });
$('#' + id).uploadifyUpload();
});
});
</script>

$(document).ready(function () {
//上传图片
$('[id^=uploadnew]').uploadify({
'uploader': '../../dwz/uploadify/scripts/uploadify.swf',
'script': 'http://image.uiyi.cn/UploadServer/UploadEditNameFile2',
'cancelImg': 'cancel.png',
'auto': false,
'multi': false,
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
'queueSizeLimit': ,
'sizeLimit': ,
'buttonText': 'Choose Images',
'folder': 'singleproduct',
'onComplete': function (event, queueID, fileObj, response, data) {
var j = $.parseJSON(response);
if (j.Status == ) {
alert('成功');
var s = j.FileName.split(',')[];
var str = s.substr(, s.length - );
$("#hidimg" + str).val(j.FileName.split(',')[]);
}
},
'onError': function (event, queueID, fileObj) {
alert("文件:" + fileObj.name + " 上传失败");
},
'onAllComplete': function (event, queueID, fileObj, response, data) { }
});
});

下面就是添加下一行的时候了

 <div class="buttonActive">
<div class="buttonContent">
<button type="button" value="添加一行" class="ds-btn ds-btn-ok" id="add" onclick="addLine(@(Model.ID))">
添加一行</button>
</div>
</div>

下面是点击触发的js(这里想说的时候是做事要仔细)

<script type="text/javascript">
function addLine(id) {
var intid = $("#intid").val();
id = parseInt(id) + parseInt(intid);
var temp = '<tr>';
temp += '<td style="width:200px">';
temp += '<input type="text" name="ReleProduct" />';
temp += '</td>';
temp += '<td style="width:400px">';
temp += '<input type="text" name="ProTitle" class="required" size="40"/>(12~14个字)';
temp += '</td>';
temp += '<td style="width:200px">';
temp += '<input type="text" name="ProUrl" class="required"/>';
temp += '</td>';
temp += '<td style="width:100px">';
temp += '</td>';
temp += '<td style="width:200px">';
temp += '<input type="file" id=newupload' + id;
temp += ' /><br />'
temp += '<input type="button" id="btn" class="uploadparas" dataid=newupload' + id;
temp += ' value="上传" />';
temp += '<input type="hidden" id=hidimg' + id;
temp += ' name="ProImgUrl" />';
temp += '</td>';
temp += '<td style="width:100px">';
temp += '<a class="btn-del J_DelImageMap J_Del" href="javascript:;" >删除</a>';
temp += '</td>';
temp += '</tr>';
$("#J_PicRound").append(temp);
$("#intid").val(id);
f2(id);
}
$("a.J_DelImageMap").unbind("click").live("click", function () {
$(this).parent("td").parent("tr").remove();
});

下面就是f2的js

function f2(id) {
//上传图片
$('[id^=newupload' + id + ']').uploadify({
'uploader': '../../dwz/uploadify/scripts/uploadify.swf',
'script': 'http://image.uiyi.cn/UploadServer/UploadEditNameFile2',
'cancelImg': 'cancel.png',
'auto': false,
'multi': false,
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
'queueSizeLimit': ,
'sizeLimit': ,
'buttonText': 'Choose',
'folder': 'singleproduct',
'onComplete': function (event, queueID, fileObj, response, data) {
var j = $.parseJSON(response);
if (j.Status == ) {
alert('成功');
var s = j.FileName.split(',')[];
var str = s.substr(, s.length - );
$("#hidimg" + str).val(j.FileName.split(',')[]); }
},
'onError': function (event, queueID, fileObj) {
alert("文件:" + fileObj.name + " 上传失败");
},
'onAllComplete': function (event, queueID, fileObj, response, data) { }
});
} </script>

总之要专心,要自信,做了好就了,如果有人也有这个困难,可以相互交流,谢谢

jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用的更多相关文章

  1. jquery文件上传控件 WebUploader

    WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子:  这个样子是默认的效果.  这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...

  2. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  3. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  4. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  5. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  6. MVC3+jquery Uploadify 上传文件

    最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...

  7. 聊一聊jquery文件上传(支持多文件上传)

    谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...

  8. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  9. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

随机推荐

  1. memcached命令行参数说明(转)

    1.启动Memcache 常用参数 -p <num>      设置TCP端口号(默认不设置为: 11211) -U <num>      UDP监听端口(默认: 11211, ...

  2. [Flex] Accordion系列-Header的运用

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  3. JAVA中的策略模式

    现在我们有一个虚基类-鸭子(abstract Duck). 有真鸭子,野鸭子,橡皮鸭子继承了该类.虚基类有swing方法,毕竟游泳是所有的鸭子都应有的功能.还有一个虚方法display,这个方法在子类 ...

  4. cocos2dx 菜单按钮回调方法传参 tag传参

    .h文件 void menuCallBack(CCObject* pSender); .cpp CCMenuItemSprite* item = CCMenuItemSprite::create( m ...

  5. Android——Dialog

    public class DialogActivity extends Activity { //进度对话框    ProgressDialog progressDialog; @Override   ...

  6. MFC学习 画图设置字体按钮风格

    修改按钮样式时, 设置按钮关联哪个按钮类, 按钮类是自己写的, 从CButton继承, 重写DrawItem可修改按钮样式. 代码中包括画线, 点, 圆, 设置这些的样式, 如线粗, 颜色, 字体. ...

  7. sublimeText3-EOFError: EOF when reading a line

    最近在自学python,练习网上教程代码的时候遇到: EOFError: EOF when reading a line 发现原因是sublime的console不支持输入,安装SublimeREPL ...

  8. springMVC导入excel案例poi

    直接上代码: 第一步,controller 引入 private static final String CHECK_FILE = "checkExceFile"; /** * 对 ...

  9. MSP430F149学习之路——蓝牙模块

    注意蓝牙模块的接法! #include <msp430x14x.h> ]; ; void int_clk() { BCSCTL1 &= ~XT2OFF; BCSCTL2 |= SE ...

  10. OSGI.NET mainfest.xml 配置

    在使用 OSGI.NET进行插件式的开发时,需要对 Mainfest.xml 进行配置, Mainfest 文件是插件的重要配置文件,其中暴露了插件启动方式以及插件启动时所依赖的程序集或其它资源的信息 ...