精华内容
下载资源
问答
  • (给Web前端雪儿加星标,提升前端技能)之前过图片上传的案例,但是时间一长就忘了,这次的这个程序用到了图片的上传,并且能够图文显示,所以了这篇文章来记录一下。由于人们的生活质量的提高及网络的发达,...

    (给Web前端雪儿加星标,提升前端技能)

    前写过图片上传的案例,但是时间一长就忘了,这次写的这个程序用到了图片的上传,并且能够图文显示,所以写了这篇文章来记录一下。由于人们的生活质量的提高及网络的发达,所以在各大软件中上传个人的头像及其他图片已成为普遍的事情,差不多所有的软件都实现了这个功能,那么他们究竟是怎么做到的呢?其实并不难,现在我就以一个完整的例子来讲解一下。先来看一下效果图及结构,再来看一下实现的功能的写法。

    html文件

    a5e8a75fff4948a239c8d60ff372f69a.png

    问题一:如何实现上传图片的功能并把图片显示出来?

    4个步骤:

    1. 先打开file文件表单选择图片;
    2. 创建FileReader对象,用正则表达式过滤图片文件;
    3. 利用改变事件将图片显示出来;
    4. 读取文件,将url绑定到img标签的src属性上。

    详细:

    01.chooseImageFile方法

    adb42ab4b2c79179f729371b635e6ac4.png

    02.创建FileReader对象,用正则表达式过滤图片

    b0864021d5ba1e9d0a3c4c6f328de3fd.png

    FileReader对象允许Web应用程序来异步读取存储在用户计算机上的文件里面的内容,使用File和Blob对象指定要读取的文件或数据,其中结合input:file可以很方便的读取本地文件里面的内容。

    03.利用改变事件将图片显示出来

    9a3b80dc48adb8e2f99b59ca3bd2ff58.png

    readAsDataURL()方法是 FileReader 对象里面的方法,其作用为可以获取 API 异步读取的文件 数据,将图片另存为数据 Url,还可以实现图片上传预览的效果,让用户确认是否就是上传这张 图片,提升用户体验。

    04.读取文件

    4c996e667cbca28640b2e51a1dac47fd.png

    问题二:如何进行提交表单数据?

    给保存按钮一个点击事件,进行提交数据,再给form标签一个action行为进行提交表单数据。

    94306ce6ddb6816c46cfa0d577bfbc34.png

    问题三:如何清空图片?

    17e219e698daa5b66b7dfeb367853da0.png

    问题四:如何把图片保存到数据库

    88d6a428e70cba5fabd97aa3df7d6587.png

    注:在保存数据到数据库的时候我遇到一个问题,就是虽然图片上传到了现实出来了,但是无法保存到数据库,主要是fileCommodityPicture传过来的值,第一种是传到控制器的名字不能与数据库中存放图片的字段对应;第二种是传到控制器的值要与input中的name属性中的名字一致;第三种就是在form标签中写明是用了post请求(method="post"),否则fileCommodityPicture的值无法传到控制器。虽然看似简单,但是还是要注意细节问题!
    展开全文
  • 按钮共存

    2021-02-26 22:54:56
    之前在一个web系统的设计中,和另一个设计师讨论,“保存”和“取消”按钮怎么设计。我的观点是,保存是比取消更常用的按钮,也是用户的主要目的(用户不会为了取消来使用表单),所以在视觉上,保存按钮应该比...
  • 其中web_input是文本框,输入文字,下面那个链接web_button是提交按钮,点击链接之后就会提交。我看网上的例子都需要写一个提交参数,例如:pastData=“username=aaa&userpwd=bbb”; 那么我的这个怎么写呢?主要是...
  • 试过许多方法,但是没有能... 过程为,点击按钮submit,提交表单,跳转action。但是,总是提示404错误。 1.跳转前:http://localhost:8880/ten/ 2.跳转后:http://localhost:8880/WEB-INF/jsp/checktest.jsp(404错误)

    试过许多方法,但是没有能跳转成功!

    Tomcat的虚拟路径配置为:<Context path="/ten" docBase="E:\Software Development Environment\ten"/>

    index.jsp的action代码为:  

    <form action="/WEB-INF/jsp/checktest.jsp" method="post" > 过程为,点击按钮submit,提交表单,跳转action。但是,总是提示404错误。

    1.跳转前:http://localhost:8880/ten/

    2.跳转后:http://localhost:8880/WEB-INF/jsp/checktest.jsp(404错误)
     

    checktest.jsp所在文件夹为:E:\Software Development Environment\ten\WEB-INF\jsp,所在工程文件中的位置为:

    ten/WebRoot/WEB-INF/jsp/checktest.jsp

    index.jsp所在工程文件位置为:ten/WebRoot/index.jsp


    工程文件夹和虚拟路径的文件夹如图,不知道能不能上图。

    不知道问题出在哪,求解答!不胜感激~

    展开全文
  • cgi and webserver

    2018-08-30 10:37:58
    继续上一篇文章,就行了解关于cgi和webserver的设计: ...一个输入框和一个提交按钮: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="{CHA...

    继续上一篇文章,就行了解关于cgi和webserver的设计:
    当我们想在网页中提交一些数据的时候,这些数据在服务器怎么处理的呢:
    现在test文件夹下面创建一个html,index.html
    写一个输入框和一个提交按钮:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title>提交页面</title>
        </head>
        <body>
            <form action="cgi-bin/index.py">
                <input type="text" name="user"><input type="submit" value="submit">
            </form>
        </body>
    </html>
    

    然后再cgi-bin文件夹下面写一个index.py :

    import cgi 
    
    form = cgi.FieldStorage()
    print('Content-type: text/html\n')
    
    name = form['user'].value if 'user' in form else '无名'
    
    print('<h1>hello {0}</h1>'.format(name))
    

    如果你提交的是中文,然后运行不能显示,这是编码问题
    index.html 中主要的是action指定路径和name指定字段
    index.py 中主要的是用到cgi中存储字段的方法

    展开全文
  • 第二个是一个form表单,提交按钮后,将连接到验证页面 test1.jsp3.第三个是比较猜的数和随机数。对了,提示再玩一次,不对则继续猜。用一个超链接 test2.jsp老师的思路越来越难搞了。怎么写啊,用到hashMap时候cai....

    思路:1.第一个是随机产生的数字,告诉我们去猜  cai.jsp

    2.第二个是一个form表单,提交按钮后,将连接到验证页面 test1.jsp

    3.第三个是比较猜的数和随机数。对了,提示再玩一次,不对则继续猜。用一个超链接 test2.jsp

    老师的思路越来越难搞了。怎么写啊,用到hashMap时候

    cai.jsp

    My JSP 'cai.jsp' starting page

    int number=(int)(Math.random()*100);

    session.setAttribute("number",number);

    %>

    去猜数字---》》开始

    test1.jsp

    My JSP 'test1.jsp' starting page

    test2.jsp

    My JSP 'test2.jsp' starting page

    Integer str1=(Integer)session.getAttribute("number");

    String str2=request.getParameter("guess");

    int num1=Integer.valueOf(str1);

    int num2=Integer.parseInt(str2);

    if(num1==num2){

    out.print("您猜对了---再玩一次 guess");

    }else if(num1>num2){

    out.print("您猜小了---guess");

    }else{

    out.print("您猜大了---guess");

    }

    %>

    展开全文
  • Web动态添加控件

    千次阅读 2006-09-19 14:27:00
    但是其实这些都是非常简单的,可能疏忽了一点两点,补充以前的2篇文章(以前的比较乱)这个页面实现:点击添加按钮-》添加一个文本框一个提交按钮-》点击提交按钮输出文本框值点击删除按钮(就是
  • 第二个是一个form表单,提交按钮后,将连接到验证页面 test1.jsp  3.第三个是比较猜的数和随机数。对了,提示再玩一次,不对则继续猜。用一个超链接 test2.jsp 老师的思路越来越难搞了。怎么写啊,用到hashMap...
  • 后台管理早好了,运营过来跟我说,这个搜索能不能修改一下,直接用回车键来搜索,不希望每次都要去点击搜索按钮,后来我去改了下触发事件,发现怎么改都是刷新页面的效果,根本就没去ajax调取搜索接口,百度了一番,发现...
  • <p>JQ动态创建file控件后,怎么将file文件路径提交给PHP处理端口 我是一个初学者,...但是上传附件需要多个上传,...我用了以下DEMO但是我用 <code><...PHP端改怎么写,</p>
  • js如何传值到ACTION中

    2010-11-09 22:29:22
    一个数据库的表LampInfo(2个主键id ,no) 对应JAVA中的类名是LampInfo, state为其中一个属性 ... 现在要在JS代码中更改... 如果用按钮提交传值 ,在ACTION里又该怎么写呢? JAVA WEB是SSH2框架,求教高手·····
  • asp.net知识库

    2015-06-18 08:45:45
    忽略大小Replace效率瓶颈IndexOf 随机排列算法 理解C#中的委托[翻译] 利用委托机制处理.NET中的异常 与正则表达式相关的几个小工具 你真的了解.NET中的String吗? .NET中的方法及其调用(一) 如何判断ArrayList,...
  •  显示用户加入购物车的商品,计算总的价格,提供全选和取消全选的按钮,从后台获取商品的单价,判断当前剩余的数量,当用户点击数量添加或者减少之后,对于总价要实时刷新,采用jQuery对数据进行修改,当用户取消...
  • +ExtAspNet和Asp.net的提交按钮兼容问题(feedback:千帆)。 -在2009-03-03 v1.3.0曾经提到这个兼容问题,并有这样的规则,如果Asp.net的按钮AJAX提交,必须设置UseSubmitBehavior="false" --也就是说生成的input...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -为按钮增加DisableControlBeforePostBack属性 - 回发之前是否禁用按钮,防止重复提交 - 默认为true。 -Grid的Values属性访问限制由internal改为public,这就意味这可以自由改变Grid中每个单元格的值了。 -增加...
  • 应该怎么 <strong>问题补充:</strong><br />感谢 zgy_zhengGY <pre name="code" class="xml"> <action name="modifyPwd"> <result type="redirect-action...
  • JAVA自学之路

    2012-09-21 20:39:46
    在网页A输入了一个人的名字,提交到B,首先存储到数据库,然后再读出来,发现乱码!怎么办?当然是分析环节: 客户输入->HTTP发送->B接收->存储到数据库->读出->展现到网页 每个环节都可能出问题,怎么才能知道...
  • ios开发记录

    2015-08-06 23:12:11
    //有交叉就怎么怎么样 //Activity 活动 Indicator指示器 // UIActivityIndicatorView *ai = [[UIActivityIndicatorView alloc] init]; // ai.activityIndicatorViewStyle = ...
  • 虽然说学习ASP.NET不需要任何ASP基础,但是我觉得如果大家ASP不会,还是先看一下【十天学会ASP教程】,大家所需要了解的不是ASP的程序怎么写,而是怎么构建服务器,怎么使用HTML表单,同时对SQL语句有一个基础和理解...
  • console.log("your web may not support IndexedDB,please check."); }; //焦点处理 document.querySelector("#message").addEventListener("focus",function() { this.value = ""; }); document....
  • ASP.NET常用代码

    2008-12-31 14:21:44
    在DataGrid的_ItemDataBound里 if (e.Item.ItemType == ListItemType.Item ||e.Item.ItemType == ListItemType.AlternatingItem) { e.Item.Attributes.Add("onmouseover","this.style.backgroundColor='#99cc00';...
  • 1.可以验证数字签名,使在线商务的提交动作(submission)有效。 2.可以被方便的建立索引和进行更有效搜索。 3.可以在不同语言之间传输数据。 W3C组织正在研究一种名为RDF(Resource Description Framework)的...
  • 主要是看CD这个过程怎么做更好。自动触发了构建操作,还是直接使用构建后的 <code>artifacts</code> 直接部署,走不走Jenkins后续方案等……下边简单介绍一下。 <h2>GitLab 的CI配置 <p><strong>前提&#...
  •  在DataGrid的_ItemDataBound里 if (e.Item.ItemType == ListItemType.Item ||e.Item.ItemType == ListItemType.AlternatingItem) { e.Item.Attributes.Add("onmouseover","this.style.backgroundColor=’#99cc00...
  • 软件工程教程

    热门讨论 2012-07-06 23:10:29
    用例只描述参与者和系统在交互过程中做些什么,并不描述怎么做。 用例图 关联关系 用例图 泛化关系 用例图 泛化关系 用例图 用例图 用例图 用例用于什么情况? 不知道什么情况不用用例 如果没有用到用例,...
  • 标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。...

空空如也

空空如也

1 2
收藏数 28
精华内容 11
关键字:

web提交按钮怎么写