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. Android使用KSOAP2调用WebService及正确导入jar包的问题(转)

    Android使用KSOAP2调用WebService及正确导入jar包的问题(转)     错误信息 最近在学Android使用KSOAP2调用现有的Webservice的方法,期间在网上找了很多代 ...

  2. tiny210裸机第1课(启动原理)

    软硬件环境 宿主机系统:ubuntu 板子芯片:S5PV210(Contex-A8),512M DDR2,512M SLC Nand 交叉编译器:arm-linux-gcc-4.5.1 手册:S5PV ...

  3. ElasticSearch 概述

    简介 Elasticsearch是一个基于Lucene的开源搜索引擎.Elasticsearch也使用Java开发并使用Lucene作为其核心来实现所有索引和搜索的功能,但是它的目的是通过简单的RES ...

  4. hdu 1255 覆盖的面积(线段树 面积 交) (待整理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1255 Description 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积.   In ...

  5. Microsoft Office 2007的ContentType

    当从浏览器返回一个文件时,需要指定ContentType,以下是Office2007对应的值: "application/vnd.openxmlformats-officedocument. ...

  6. PHP截取IE浏览器并缩小原图的方法

    这篇文章主要介绍了PHP截取IE浏览器并缩小原图的方法,涉及PHP调用com组件实现图像截取的相关技巧,需要的朋友可以参考下 本文实例讲述了PHP截取IE浏览器并缩小原图的方法.分享给大家供大家参考, ...

  7. 利用Scanner键盘输入

    Scanner不在java.lang.*包中,故必须import包java.util.Scanner.输入流(InputStream)为System.in 方法如下:Scanner s= new Sc ...

  8. Redis数据持久化之AOF持久化

    一.RDB持久化的缺点创建RDB文件需要将服务器所有的数据库的数据都保存起来,这是一个非常耗费资源和时间的操作,所以服务器需要隔一段时间才能创建一个新的RDB文件,就也是说创建RDB文件的操作不能执行 ...

  9. g++/gcc 链接头文件 库 PATH

    转自http://blog.csdn.net/kankan231/article/details/24243871 在Linux下编译链接或运行c/c++程序时可能会遇到找不到头文件,找不到库文件的错 ...

  10. SQL必知必会笔记(1)

    去SQL AXDB 中Query数据 Open the SQL > Connect > Select AXDB > new Query select REFID, ITEMID, R ...