jqueryfileupload插件

      <input type="file" id="cover" name="cover" style="display: none;"/>
                        <input type="button" οnclick="selectDo()" value="浏览..."/><span id="text"></span>
                        <input type="hidden" id="picUrl" required name="picUrl">

    

  $("#cover").fileupload({

     url: "${ctx}/wxmMsgLog/upload",//文件上传地址,当然也可以直接写在input的data-url属性内
     formData: {sendType: "${wxmMsgLog.sendType}", service: "${service}"},//如果需要额外添加参数可以在这里添加
     //        $("#img1").attr("src", data.imgurl);
     done: function (e, result) {

     //发送到微信后台下载下来  显示
     $("#picUrl").val(result.result["picUrl"]);
     //下载到的地址
     *//*    $("#img1").attr("src", "
    ${ctx}/upload/"+result.result["filePath"]);
     //设置值*//*

     }
     })

 

    $(document).ready(function () {

        $("#edit_mass_form").validate({
            /*    ignore: "",
             //            onfocusout: true,
             errorPlacement: function (error, element) {
             if (element.attr("name") == "picUrl")
             error.insertAfter("#text");
             else
             error.insertAfter(element);
             }*/
        });

        /*      $('#selectFile').bind('click', function () {
         var ie = !-[1, ];
         if (ie) {
         $('#cover').trigger('click').trigger('change');
         } else {
         $('#cover').trigger('click');
         }
         });

         $('#cover').change(function () {
         $("#text").text(this.value);
         });*/
    });

    /* function selectDo() {
     $("#cover").trigger('click');
     }*/

    //使用模拟的 input file 当点击button的时候触发打开文件  当更改选中的时候 获取文件的名称  在button
    //后面写一个span  写入文件的名称   并保存picUrl  验证:  取消隐藏验证 当名称=picUrl的时候就是他选中
    //上传过图片  如果没有上传过则 在span 后面添加错误消息

<%@ include file="/common/taglibs.jsp"%>
<head>
<title><fmt:message key="creative.detail.title" /></title>
<meta name="heading" content="<fmt:message key='creative.detail.heading'/>" />
<meta name="menu" content="CreativeBgListMenu" />

<style>

.button.add {
/*background: url("${ctx}/styles/images/product/icon-add.png") no-repeat center;
border: 2px dotted;
width: 59%;
text-align: center;
margin: 0 auto;*/

background: url("${ctx}/styles/images/icon-add.png") no-repeat left center;
cursor: pointer;
}

.delete {
background: url("${ctx}/styles/images/icon-delete.png") no-repeat left center;
cursor: pointer;
}


</style>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jquery.imgMagnifier.js' />"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jQuery-File-Upload-9.9.3/jquery.ui.widget.js' />"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jQuery-File-Upload-9.9.3/jquery.fileupload.js' />"></script>
<script type="text/javascript" src="<c:url value='/scripts/jquery/jQuery-File-Upload-9.9.3/jquery.iframe-transport.js' />"></script>

<script type="text/javascript">
$(document).ready(function() {
// 关闭
$("#creativeDetailCancelBtn").bind("click", function() {
$(this).parents("div[dialogContent='dialogContent']:last").dialog("close");
});
$("#publishdate").calendarpicker(false, "enddate");
$("#enddate").calendarpicker(true, "publishdate");
//fillintegralNum();
// 查看已上传图片
$("a.readImgPreview").ImgRead();

$(".img").fileupload({

//当点击时候,保存图片并保存图片的id
url: "<c:url value='/creativeimage/getImagePath'/>",//文件上传地址,当然也可以直接写在input的data-url属性内
//formData: {creativeCharts: $(this)},//如果需要额外添加参数可以在这里添加// $("#img1").attr("src", data.imgurl); done: function (e, result) { $("#showimg1").attr("src", "/upload/"+result.result); $("input[name='filepath']:first").val(result.result); } }); $('#buttonAdd').on('click', function () { var $integralHtmlObj = $(".relatedIntegral:first").clone(); $integralHtmlObj.find("#buttonAdd").remove(); $integralHtmlObj.find("img").attr("src", ""); $integralHtmlObj.find("input[name='filepath']").val(''); /*找到最后一个td 添加css 属性*/ $integralHtmlObj.find(".innerfile:last").append('<span οnclick="deleteIntegral($(this))" class="delete">&nbsp;&nbsp;&nbsp;&nbsp;</span>'); $(".relatedIntegral:last").after($integralHtmlObj);//最后一个class为relatedIntegral的元素 $(".img").fileupload({ //当点击时候,保存图片并保存图片的id url: "<c:url value='/creativeimage/getImagePath'/>",//文件上传地址,当然也可以直接写在input的data-url属性内 //formData: {uuid: $("#img").val()},//如果需要额外添加参数可以在这里添加 done: function (e, result) { //$("#showimg1").attr("src", "/upload/"+result.result); var img = $(this).parent().parent().find("img");// var homeNames = $("input[name='homeMember.homeName']:last"); //设置input 的值,根据值找到file 保存 $(this).parent().parent().find("input[name='filepath']").val(result.result); img.attr("src", "/upload/"+result.result); } }); });}); function deleteIntegral(obj) { obj.parent().parent().remove(); }// 计算function fillintegralNum() { var integral = $("#integral").val()==""?1:parseInt($("#integral").val()); var planMoney=$("#planMoneyTxt").val()==""?0:parseInt($("#planMoneyTxt").val()); var integralNum=planMoney / 2; $("#integralNum").val(integralNum); $("#integralNum").blur(); var publishnum = integralNum / integral; $("#publishnum").val(publishnum); $("#publishnum").blur(); $("#planMoneyTxt").blur();}</script></head><div class="pagecommlayout" style="position: absolute;"> <div class="pagecommlayoutright" style="left: 0;"> <div class="pagecommcenter" style="top: 0; bottom: 38px;text-align: center;"> <form id="creativeEditForm" name="creativeEditForm" enctype="multipart/form-data" method = "post"> <input type="hidden" style="width: 50%;" name="creative.uuid" value="${creative.uuid}" /> <table class="formTable" width="100%" style="margin: auto; line-height: 33px;" cellSpacing=0 cellPadding=0> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.advertisername" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;word-wrap:break-word;"> <select name="creative.advertiserid.uuid" > <c:forEach items="${advertisers}" var="advertiser" > <option <c:if test="${not empty creative && advertiser.value eq creative.advertiserid.uuid}">selected</c:if> value="${advertiser.value}" > ${advertiser.label} </option> </c:forEach> </select> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.content" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;word-wrap:break-word;"> <!-- 广告名 --> <input style="width:150px" name="creative.content" value="${creative.content }" /> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.showdate" />:</td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <input id="publishdate" style="width:100px" readonly="readonly" name="creative.publishdate" value="${creative.publishdate }" pattern="yyyy-MM-dd" /> ~ <input id="enddate" style="width:100px" readonly="readonly" name="creative.enddate" value="${creative.enddate }" pattern="yyyy-MM-dd" /> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.attachment" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <input type="file" class="textfocus" name="fileModel.file" /> <c:if test="${not empty creative.attachment.uuid }"> <a class="readImgPreview" href="javascript:void(0);" readPath="<c:url value='${creative.bigImgPath }' />"><fmt:message key="button.read" /></a> </c:if> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.name" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;word-wrap:break-word;"> <input type="text" name="creative.name" value="${creative.name}" /> </td> </tr> <%--<tr>--%> <%--<td style="width: 100%;padding-left:20px; text-align: left;">--%> <%--<fmt:message key="creative.detail.table.integralType" />:--%> <%--</td> --%> <%--</tr>--%> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.integral" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <!-- DL/24 H --> <c:choose> <c:when test="${not empty creative.integral }"> <input class="myMoneyFormat" format="formatNull" id="integral" decimalPoint="0" name="creative.integral" value="<fmt:formatNumber value="${creative.integral}" pattern="#,###" type="number"/>" /> </c:when> <c:otherwise> <input class="myMoneyFormat" format="formatNull" id="integral" decimalPoint="0" name="creative.integral" value="<c:if test="${not empty integralPropNum }"><fmt:formatNumber value="${integralPropNum}" pattern="#,###" type="number"/></c:if>" /> </c:otherwise> </c:choose> <fmt:message key="creative.detail.table.integral.unit" /> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.integralNum" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <!-- 合计 --> <input class="myMoneyFormat" type="text" id="integralNum" name="creative.integralNum" value="<fmt:formatNumber value="${creative.integralNum}" pattern="#,###" type="number"/>" decimalPoint="0" /> <fmt:message key="creative.detail.table.integral.unit" /> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.remark" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;word-wrap:break-word;"> <!--详细说明文 --> <s:textarea key="creative.remark" required="true" cols="30" rows="5" theme="simple" cssClass="textfocus"/> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.extraDownloadnum" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <!-- 额外下载数 --> <input class="myMoneyFormat" maxlength="10" id="extraDownloadnum" decimalPoint="0" name="creative.extraDownloadnum" value="${creative.extraDownloadnum}" /> </td> </tr> <tr> <td style="text-align: right;width: 40%;" nowrap="nowrap" > <fmt:message key="creative.detail.table.minorflg"/>: </td> <td style="width: 60%;text-align: left;padding-left: 5px;word-wrap:break-word;"> <c:if test="${creative.uuid==null}"> <input type="radio" name="creative.minorflg" value="0" checked="checked"/><s:text name="creative.minorflg.ok"/> <input type="radio" name="creative.minorflg" value="1" /><s:text name="creative.minorflg.cancle"/> </c:if> <c:if test="${creative.uuid!=null}"> <input type="radio" name="creative.minorflg" value="0" <c:if test="${creative.minorflg==0}">checked="checked" </c:if> /><s:text name="creative.minorflg.ok"/> <input type="radio" name="creative.minorflg" value="1" <c:if test="${creative.minorflg==1}">checked="checked" </c:if> /><s:text name="creative.minorflg.cancle"/> </c:if> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.outlink" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;word-wrap:break-word;"> <!-- 外部リンク先 --> <input type="text" name="creative.outlink" value="${creative.outlink}" /> </td> </tr> <tr> <td style="width: 40%; text-align: right; "> <fmt:message key="creative.detail.table.publishnum" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <!-- 最大DL数 --> <input class="myMoneyFormat" maxlength="10" id="publishnum" decimalPoint="0" name="creative.publishnum" value="${creative.publishnum}" /> <fmt:message key="creative.detail.table.integral.people" /> </td> </tr> <tr> <td style="width: 40%;padding-right:5px; text-align: right; "> <fmt:message key="creative.detail.table.planMoney" />: </td> <td style="width: 60%; text-align: left; padding-left: 5px;"> <!-- 预算 --> <input class="myMoneyFormat" maxlength="10" width="100%" name="creative.planMoney" value="${creative.planMoney }" id="planMoneyTxt" format="formatNull" decimalPoint="0" /> <fmt:message key="creative.detail.table.integral.yuan" /> </td> </tr> <c:if test="${not empty creativeAuditing && not empty creativeAuditing.uuid}"> <tr> <td style="text-align: right;width: 30%;" nowrap="nowrap" > <fmt:message key="creativeAuditing.auditOpinion" />: </td> <td style="width: 70%;word-wrap:break-word;"> ${creativeAuditing.auditOpinion} </td> </tr> </c:if> <tr> <td style="text-align: right;width: 30%;" nowrap="nowrap" > <fmt:message key="creative.detail.table.isRecommend" />: </td> <td style="width: 70%;word-wrap:break-word;"> <input type="radio" name="creative.isRecommend" value="1" <c:if test="${creative.isRecommend ==1}">checked="checked"</c:if> /><fmt:message key="creative.detail.table.true" /> <input type="radio" name="creative.isRecommend" value="0" <c:if test="${creative.isRecommend ==0}">checked="checked"</c:if> /><fmt:message key="creative.detail.table.false" /> </td> </tr> <tr> <td style="text-align: right;width: 30%;" nowrap="nowrap" > <fmt:message key="creative.detail.table.recommendSeq" />: </td> <td style="width: 70%;word-wrap:break-word;"> <input type="text" name="creative.recommendSeq" value="${creative.recommendSeq}" /> </td> </tr> <tr> <td style="text-align: right;"> 图片 </td> <td colspan="2"> <table width="100%"> <tr class="relatedIntegral"> <td style="border:none;"> <div style=" height:100px; width:100px; margin:0 auto;"> <img οnerrοr="imgLoadErrorEvent(this)" id="showimg1" class="showBigPreview" src="" style="width: 100px;height: 100px;cursor: pointer;"><br/> <input type="text" value="" name="filepath"> </div> <div class="innerfile" style="text-align:center;margin:0 auto;"> <input type="file" class="img" name="fileModel.image"><span class="button add" id = "buttonAdd">&nbsp;&nbsp;&nbsp;&nbsp;</span> </div> </td> </tr> </table> </td> </tr> </table> </form> </div> <div class="pagecommbottom" style="bottom: 0px;text-align: right;"> <a id="creativeDetailSaveBtn" class="btn_gray" href="javascript:void(0);"><fmt:message key="button.save"/></a> <security:authorize url="/creative/creative/updateApplyCreative"> <a id="creativeDetailApplyBtn" class="btn_gray" href="javascript:void(0);"><fmt:message key="creative.btn.publish"/></a> </security:authorize> <a id="creativeDetailCancelBtn" class="btn_gray" href="javascript:void(0);"><fmt:message key="button.close" /></a> </div> </div></div><script>// $(function () {// //文件上传地址// //var url = 'http://localhost/index.php/upload/do_upload';// var url = 'http://localhost/index.php/uploadwe';// //初始化,主要是设置上传参数,以及事件处理方法(回调函数)// $('#fileupload').fileupload({// autoUpload: true,//是否自动上传// //url: url,//上传地址// dataType: 'json',// done: function (e, data) {//设置文件上传完毕事件的回调函数// //$.each(data.result.files, function (index, file) {// $("#myimg").attr({src:data.result.imgurl});// $("#myimg").css({width:"290px",height:"218px"});// //alert(data.result);// },// progressall: function (e, data) {//设置上传进度事件的回调函数// var progress = parseInt(data.loaded / data.total * 5, 10);// $('#progress .bar').css(// 'width',// progress + '%'// );// }// });// });</script>

 

 

http://blog.csdn.net/bestlove12345/article/details/52254122

 

转载于:https://www.cnblogs.com/yaoyao66123/p/4319007.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值