input file表单上传控件的动态化

2024-05-06 23:18

本文主要是介绍input file表单上传控件的动态化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<!--上传控件样式-->
<script  type="text/javascript" src=
"../bootstrap-fancyfile.min.js">
</script>

<link href="../bootstrap-fancyfile.min.css" rel="stylesheet" type="text/css"/>
<!--页面代码-->
<div id="mdiv">
    <div class="form-group">
        <div class="col-md-14">
            <div class="fancy-file" style="margin-left: 130px;">
                <div class="fake-file">
                    <span class="redcolor">*</span>
                    <input class="fake-input form-control" id="fileimgvaluename"
                           name="fileimgvaluename" type="text"
                           placeholder="上传缩略图"
                           style="width: 183px; height: 34px;margin-left: 15px;">
                    <button class="btn btn-primary"
                            style="margin-left:-5px;height: 34px;">
                        <i class="glyphicon glyphicon-file icon-white"></i>
                        浏览缩略图
                    </button>
                    <input type="button" class="btn btn-success closeimgfilename"
                           οnclick="javascript:addimg()" value="继续添加"
                           style="margin-left:-6px;height: 34px;">
                    </input>
                </div>
                <input class="btn-info" οnchange="fileimgvaluename.value=this.value"
                       type="file" name="fileimgname" id="fileimgname"
                       style="margin-left:190px;width: 110px;height: 34px">
            </div>
        </div>
    </div>
</div>
<script>
    jQuery(document).ready(function () {
    bindListener();//动态添加图片
    });
</script>


<!--js-->
//动态添加多张图片
// 用来绑定事件(使用unbind避免重复绑定)
var i=0;
function bindListener() {$("a[name=removelink]").unbind().click(function () {$(this).parent().parent().parent().parent().remove();
        i=i-1;
    })
}
function addimg() {i++;
    var fileimgvaluenamea="fileimgvaluenametext"+i;//这是文本域id
    var fileimgvaluenameb="fileimgvaluenamefile"+i;//这是上传id
    var a='<div class="form-group"><div class="col-md-14"> <div class="fancy-file" style="margin-left: 145px;">' +'<div class="fake-file"> <span class="redcolor">*</span><input class="fake-input form-control" id="' + fileimgvaluenamea + '"' +'name="' + fileimgvaluenamea + '" type="text" placeholder="上传缩略图" style="width: 185px; height: 34px;">' +'<button class="btn btn-primary" style="margin-left:0px;width:118px;height: 34px;"><i class="glyphicon glyphicon-file icon-white"></i>浏览缩略图 </button>' +'<a  class="btn btn-danger"  href="#" name="removelink" style="margin-left:-6px;height: 34px;">消除</a> ' +/*'<input type="button" class="btn btn-success" οnclick="javascript:addimg()" value="继续添加" style="margin-left:-6px;height: 34px;"/>' +*/
        '</div><input class="btn-info"';
    var b='type="file" name="'+fileimgvaluenameb+'" id="'+fileimgvaluenameb+'" style="margin-left:190px;width: 110px;height: 34px"/></div></div></div>';
    if(i>7){i=7;
        alert('最多只能上传8张图片');
    }else {var c="";//获取上传fileid对应的文本域id
        switch(i){case 1:c='οnchange="fileimgvaluenametext1.value=this.value"';
                break;
            case 2:c='οnchange="fileimgvaluenametext2.value=this.value"';
                break;
            case 3:c='οnchange="fileimgvaluenametext3.value=this.value"';
                break;
            case 4:c='οnchange="fileimgvaluenametext4.value=this.value"';
                break;
            case 5:c='οnchange="fileimgvaluenametext5.value=this.value"';
                break;
            case 6:c='οnchange="fileimgvaluenametext6.value=this.value"';
                break;
            case 7:c='οnchange="fileimgvaluenametext7.value=this.value"';
                break;
        }$("#mdiv").append(a+c+b);
    }
// 为新元素节点添加事件侦听器
    bindListener();
}

这篇关于input file表单上传控件的动态化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/965663

相关文章

C#实现WinForm控件焦点的获取与失去

《C#实现WinForm控件焦点的获取与失去》在一个数据输入表单中,当用户从一个文本框切换到另一个文本框时,需要准确地判断焦点的转移,以便进行数据验证、提示信息显示等操作,本文将探讨Winform控件... 目录前言获取焦点改变TabIndex属性值调用Focus方法失去焦点总结最后前言在一个数据输入表单

Java文件上传的多种实现方式

《Java文件上传的多种实现方式》文章主要介绍了文件上传接收接口的使用方法,包括获取文件信息、创建文件夹、保存文件到本地的两种方法,以及如何使用Postman进行接口调用... 目录Java文件上传的多方式1.文件上传接收文件接口2.接口主要内容部分3.postman接口调用总结Java文件上传的多方式1

VMWare报错“指定的文件不是虚拟磁盘“或“The file specified is not a virtual disk”问题

《VMWare报错“指定的文件不是虚拟磁盘“或“Thefilespecifiedisnotavirtualdisk”问题》文章描述了如何修复VMware虚拟机中出现的“指定的文件不是虚拟... 目录VMWare报错“指定的文件不是虚拟磁盘“或“The file specified is not a virt

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分(获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并)、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小

提示:Decompiled.class file,bytecode version如何解决

《提示:Decompiled.classfile,bytecodeversion如何解决》在处理Decompiled.classfile和bytecodeversion问题时,通过修改Maven配... 目录问题原因总结问题1、提示:Decompiled .class file,China编程 bytecode

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

form表单提交编码的问题

浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urlencoded; charset=UTF-8        那么我们如果需要修改编码,不使用默认的,那么可以如下这样操作修改编码,来满足需求: hmtl代码:   <meta http-equiv="Conte

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

前端form表单+ifarme方式实现大文件下载

// main.jsimport Vue from 'vue';import App from './App.vue';import { downloadTokenFile } from '@/path/to/your/function'; // 替换为您的函数路径// 将 downloadTokenFile 添加到 Vue 原型上Vue.prototype.$downloadTokenF