jquery 用a标签控制文件上传

jquery 用a标签控制文件上传,第1张

<html xmlns="http://www.w3.org/1999/xhtml">  

  

<head>  

<title>ajaxFileUpload文件上传例子</title>  

<script type="text/javascript" src="<%=baseURL%>/kinth/js/ajaxfileupload.js"></script>  

<script type="text/javascript">  

   var flag=0      //flag作用:分两种情况提交信息,如果是修改 *** 作,没有修改上传文件,只修改其他字段的信息时点保存也能提交信息  

    function uploadFile(){  

        $.ajaxFileUpload({  

                url:baseURL+ "/fileCatalog.do?method=save",            //需要链接到服务器地址  

                secureuri:true,  

                fileElementId:'file',                        //文件选择框的id属性  

                success: function(data, status){     

                    var results = $(data).find('body').html()  

                    var obj = eval("("+results+")")  

                    $("#fileSize").val(obj.fileSize)  

                    $("#fileUrl").val(obj.fileUrl)  

                    $('#fileCatalogForm').submit()  

                },error: function (data, status, e){  

                        showDialogWithMsg('ideaMsg','提示','文件错误!')  

                }  

            })  

    }  

          

    function getFileName(obj)  

    {  

        flag=1  

            var pos = -1  

            if(obj.value.indexOf("/") > -1){  

                pos = obj.value.lastIndexOf("/")*1  

        }else if(obj.value.indexOf("\\") > -1){  

                pos = obj.value.lastIndexOf("\\")*1  

        }  

        var fileName =  obj.value.substring(pos+1)  

        $("#fileName").val(fileName)  

      $('.files').text(fileName)  

    }  

  

        function ev_save(){  

            if(submitMyForm('fileCatalogForm')){  

             if(flag==0){  

                $('#fileCatalogForm').submit()  

             }else{  

                uploadFile()  

             }   

           }             

         }  

  

         function ev_back(){  

        window.location.href=baseURL+'/fileCatalog.do?method=list'  

    }  

</script>  

</head>  

<body>  

    <html:form styleId="fileCatalogForm" action="/fileCatalog.do?method=save&fileFlag=true" method="post" enctype="application/x-www-form-urlencoded" style="text-align:left">  

    <table>  

        <tr>  

            <td>附件上传:</td>  

            <td style="text-align:left"  id="fileTd">  

                <input type="file" name="file" id="file" onChange="getFileName(this)"  /><br />                  

            </td>  

            <td colspan="2" class="tdr">  

                <ol  class=files>  

                    <c:if test="${entity.resourceId != null && entity.resourceId != ''}"><li> ${entity.fileName}&nbsp&nbsp上传成功</li></c:if>  

                </ol>  

            </td>  

        </tr>   

        <c:if test="${entity.resourceId == null || entity.resourceId == ''}">  

            <input type="text" name="fileSize" id="fileSize" >  

        </c:if>     

        <input type="hidden" id="fileUrl" name="fileUrl" value="${entity.fileUrl}"   

    </table>  

    </html:form>  

</body>

点评:点击a标签实现d出input file上传文件对话框,html、css、如下感兴趣的朋友可以参考下哈,希望对你有所帮助html复制代码代码如下:<SPAN class=tag<<SPAN class=titlediv</SPAN</SPAN<SPAN class=tag<<SPAN class=titlea</SPAN <SPAN class=attributehref</SPAN=<SPAN class=value"###"</SPAN</SPAN添加图片<SPAN class=tag</<SPAN class=titlea</SPAN</SPAN<SPAN class=tag<<SPAN class=titleinput</SPAN <SPAN class=attributetype</SPAN=<SPAN class=value"file"</SPAN <SPAN class=attributename</SPAN=<SPAN class=value"image"</SPAN <SPAN class=attributeclass</SPAN=<SPAN class=value"hidden"</SPAN <SPAN class=attributevalue</SPAN=<SPAN class=value""</SPAN /</SPAN<SPAN class=tag</<SPAN class=titlediv</SPAN</SPANcss复制代码代码如下:<SPAN class=class.hidden</SPAN <SPAN class=rules{<SPAN class=rule<SPAN class=attributedisplay</SPAN:<SPAN class=value none</SPAN</SPAN<SPAN class=rule}</SPAN</SPAN复制代码代码如下:jquery$('a').on('click', function(e) {

依据题主的描述,既然可以把上传的文件放到别的目录下,那么就不应该在A标签上下功夫,而是要在上传程序上做努力。

既然可以上传到别的位置,那么说明,题主现有程序已经实现了上传的功能,那么现在要做的就是写一个程序根据上传文件的标识来访问特定的文件,A标签只不过是访问这个程序的一个手段。

比如点击链接下载id为1的文件,那么这个程序通过id在硬盘里找到id为1的文件,并且把他复制到web目录到缓存目录,然后返回这个临时目录到url地址给客户端。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11917175.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存