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. Objective-C: 字符串NSString与NSMutableString

    字符串算是OC中非常重要和常用的一部分内容,OC中的字符串与我之前在学习C,C++,Java中的字符串有一定的不同,它非常类似于C++中容器的概念,但用法却与之还是有很大的不同,也许是因为OC的语法就 ...

  2. dirname basename 截取路径中的目录以及文件名

    dirname basename    截取路径中的目录以及文件名 windows 下面: #include "shlwapi.h"#pragma comment(lib, &qu ...

  3. jQuery formValidator表单验证插件常见问题

    1.    如何实现一个控件,根据不同的情况,实现不同的控制? 2.    一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 3.    我采用的页面上文字问题的方式,点提交的时候, ...

  4. 用inno Setup制作web项目安装包

    http://www.cnblogs.com/xionghui/archive/2012/03/22/2411207.html 用inno Setup制作安装包 新建一个文件夹exambody,放ap ...

  5. python datetime时区转换

    from pytz import timezone def datetime_as_timezone(date_time, time_zone): tz = timezone(time_zone) u ...

  6. Oracle常用命令1

    一. 安装是用户管理: sqlplus /nolog; connect /as sysdba; alter user sys identified by change_on_install; alte ...

  7. (medium)LeetCode 240.Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  8. java 的Swing

    1.原来的AWT组件来自java.awt包,而AWT组件的java应用程序在不同平台的界面显示不同.但是在不同平台运用Swing开发的应用程序,就可以使用同一的GUI界面. 2.SWing组件通常被称 ...

  9. POJ 3308 Paratroopers(最小割EK(邻接表&矩阵))

    Description It is year 2500 A.D. and there is a terrible war between the forces of the Earth and the ...

  10. Sqoop实现自定义job的增量导入

    需求:redis缓存的数据隔段时间往MySQL中写入一次.如果按照job的增量导入,比如上次redis向mysql导入数据时间为8:00,下一次导入时间为9:00,8:20sqoop进行增量导入,导入 ...