jquery多文件上传(js+asp.net可增加上传框)(1/3)

<%@ page language="c#" contenttype="text/html" responseencoding="gb2312" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script  type="text/网页特效">
(function($) {

     $.fn.multiupload = function(options) {

        var multiupload = this;

         options = $.extend({
             fileselector: ".file-upload",
             deleteselector: ".delete-file"
         }, options || {});

        var filenamedatakey = "targetfilename";

        var addoperate = function(target) {
            var warp = $("<div></div>");
             multiupload.append(warp);

             warp.append(target);
             target = $(target);

            var deletebutton = $("<a></a>");
             warp.prev().append(deletebutton);
             deletebutton.text("剔除");
             deletebutton.attr("href", "javascript:void(0);");
             deletebutton.data(filenamedatakey, target.attr("name"));
             deletebutton.addclass(options.deleteselector.substring(1));
         };

        var filecount = function() {
            return multiupload.find(options.fileselector).size();
         };

        var emptyfilecount = function() {
            return multiupload.find(options.fileselector).filter(function() {
                return !$(this).val();
             }).size();
         };

        var templete = multiupload.find(options.fileselector + ":first");
        // addoperate(templete);
        var div = $("<div></div>");
         div.append(templete);
         multiupload.append(div);
        //alert(multiupload.html());

        var basename = templete.attr("name");

        var count = 1;

        this.find(options.fileselector).change(function() {
            var self = $(this);

            if (self.val() && emptyfilecount() === 0) {
                var newfile = self.clone(true);

                 self.parent().append(newfile);
                 newfile.val(null);
                 newfile.attr("name", basename + ++count);

                 addoperate(newfile);
             }

         });

        this.find(options.deleteselector).live("click", function() {
            var self = $(this);
             self.parent().remove();
            //             var filename = self.data(filenamedatakey);
            //             var file = multiupload.find("input[name=" + filename + "]");

            //             if (filecount() === 1) {
            //                 file.val(null);
            //             } else {
            //                 file.parent().remove();
            //             }

         });

     };

 

})(jquery);

</script>

 

首页 1 2 3 末页

时间: 2024-09-29 18:10:01

jquery多文件上传(js+asp.net可增加上传框)(1/3)的相关文章

jQuery.uploadify文件上传组件实例讲解_jquery

1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好,无刷新,带上传进度等等.在最近的短信平台开发中,使用Uploadify进行文件上传. Uploadify官网地址是:http://www.uploadify.com/ 可满足项目开发需求. 下载地址:http://www.uploadify.com/wp-content/uploads/files/

php jquery 多文件上传简单实例

 这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下   代码如下: <div id="mulitplefileuploader">Upload</div>     <div id="status"></div>   <script>     $(document).ready(function()   {     var settings = {       url: &

jQuery实现文件上传功能

问题描述 不能用控件,就是用jQuery代码实现的,就是单击上传按钮,如果上传成功之后,把文件的路径保存在一个文本框里,并且有上传成功的提示信息,亲,怎么实现的啊,如果有相关的插件和怎么用的,可以发在我的邮件,谢谢啊,很急的,215704087@qq.com 解决方案 解决方案二:jQuery有现成的上传插件..很好用的解决方案三:洗脚,明天发给你解决方案四:想要上传产品图片什么的吧?平常都是用服务器控件上传文件,web编辑器也能上传,一般来说使用这个web编辑器是在一篇文章里面插入图片,很方便

jQuery Ajax文件上传(php)_jquery

如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用上传处理函数来处理上传的文件.而处理函数一般都是用PHP,JSP,ASP等服务端语言来实现的.那么如何通过WEB(HTTP协议来上传文件呢?)你需要类似于以下的HTML代码:test.html 复制代码 代

详解jQuery uploadify文件上传插件的使用方法_jquery

uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能. 现在最新版为3.2.1. 在线实例 实例中用到的php文件UploaderDemo.php请在页面下方下载 引入文件 <link rel="stylesheet" type="text/css" href="uploadify.css" /> <script type="text/javascript

jquery jaxFileUpload文件上传插件使用详解

jaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:/ajaxfileupload.js. 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐藏的表单,然后进行提交操作,达到附件上传的目的,主要实现在源码里都有注释,不难理解,我们也可以基于此

jquery WebUploader文件上传组件用法详解

使用WebUploader还可以批量上传文件.支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件. 接下来我以图片上传实例,给大家讲解如何使用WebUploader. HTML 我们首先将css和相关js文件加载. <link rel="stylesheet" type="text/css" href="css/webuploader.css"> <script src="ht

jQuery实现文件上传进度条效果

最近呢,老大让做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太丑了,就用span来做了,可控性强.添加点css: .upload-span{     display: inline-block;     width:

php jquery 多文件上传简单实例_php实例

复制代码 代码如下: <div id="mulitplefileuploader">Upload</div>  <div id="status"></div>  <script>  $(document).ready(function()  {  var settings = {      url: "upload.php",      method: "POST",