jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用
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选择器的使用的更多相关文章
- jquery文件上传控件 WebUploader
WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子: 这个样子是默认的效果. 这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- jquery 图片上传本地预览V1.2
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级 修复jquery版本问题 支持任意jqu ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- MVC3+jquery Uploadify 上传文件
最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify..都做了一些注释,一看便知. 可以去官网下载最新的:Uploadify下载地 ...
- 聊一聊jquery文件上传(支持多文件上传)
谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
随机推荐
- 学习“要件审判九步法”,正确处理五个关系 z
学习“要件审判九步法”,正确处理五个关系 2015-06-29 07:39:07 | 来源:人民法院报第二版 | 作者:阮丹军 “要件审判九步法”,是邹碧华法官总结审判和审判管理双重经验后的心血之作, ...
- 跨应用Session共享
摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术.本文将详细讨论session的工作机制并且对在Java ...
- oracle游标循环的嵌套
完成批量修改user_tables中的所有表的栏位名(从MS SQL导入过来,发现大小写问题,造成很多麻烦) 存储过程见下: -- Created on 2012/3/14 by FREE decla ...
- arm-linux-objcopy
被用来复制一个目标文件的内容到另一个文件中,可用于不同源文件的之间的格式转换示例: arm-linux-objcopy –O binary –S file.elf file.bin 常用的选项(大写) ...
- 内存调试工具---valgrind
安装 1.到www.valgrind.org下载最新版valgrind-3.2.3.tar.bz2 2.解压安装包:tar –jxvf valgrind-3.2.3.tar.bz2 3.解压后生成目录 ...
- Apahce映射网络路径
要点有两个: 1. 要使用全路径,不要使用映射的网络驱动器.2. 路径之间用斜杠/,不要用反斜杠\. Alias /weili.mobile "//vmware-host/Shared Fo ...
- java 抽象类和接口总结
1.抽象类和抽象方法必须使用abstract 关键字来修饰 2.抽象类不能实例化 3.抽象方法是为实现的方法,它与空方法时两个完全不同的概念 4.abstract 不能喝private static ...
- Sqoop2环境搭建
正在准备做Spark SQL external data source与关系型数据库交互的部分,参考下Sqoop2是如何操作关系型数据库的. 下载地址:http://archive.cloudera. ...
- 一个简单的AJAX实例
创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...
- 消除PyCharm中满屏的波浪线
PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑. 在网上看了 ...