码迷,mamicode.com
首页 > Web开发 > 详细

记一种有图片上传的表单提交

时间:2018-10-26 14:25:46      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:src   class   信息   desc   lag   control   hot   客户端   lca   

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>动态加载下拉框中的类别_文件上传_添加商品</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  </head>
  <body>
      <!-- 上传对客户端和服务器都有要求 -->
      <!-- 客户端:
           1_提交方式为POST,即method="POST"
           2_为每个表单项取一个名字,即<input name="pname">
           3_ enctype="application/x-www-form-urlencoded"表示将表单中的内容按URL编码后,随着请求传递到服务器,强调要编码
                    application/x-www-form-urlencoded是一个默认值
           enctype="multipart/form-data"表示将表单中的内容原封不动的将数据随着请求传递到服务器,强调不编码  
                   注意,是对整个表单,只要表单中有上传文件,就得用multipart/form-data,否则就用application/x-www-form-urlencoded
       -->
    <form 
        action="${pageContext.request.contextPath}/ProductServlet?action=add" 
        method="POST" 
        enctype="multipart/form-data">
        <table border="2" align="center">
            <tr>
                <th>名称[FileItem]</th>
                <td><input type="text" name="pname" value="小米cc手机"/></td>
                <th>市场价[FileItem]</th>
                <td><input type="text" name="market_price" value="105"/></td>
                <th>商场价[FileItem]</th>
                <td><input type="text" name="shop_price" value="100"/></td>
            </tr>
            <tr>
                <th>上传文件[FileItem]</th>
                <td><input type="file" name="pimage"/></td>
                <th>是否热门[FileItem]</th>
                <td>
                    <select name="is_hot" style="width:111px">
                        <option value="1">热门</option>
                        <option value="0">冷门</option>
                    </select>
                </td>
                <th>是否上架[FileItem]</th>
                <td>
                    <select name="pflag" style="width:111px">
                        <option value="1">上架</option>
                        <option value="0">下架</option>
                    </select>
                </td>
            </tr>
            <tr>    
                <th>所属类别[FileItem]</th>
                <td>
                    <select id="category" name="cid" style="width:222px">

                    </select>
                </td>
            </tr>
            <tr>
                <th>描述[FileItem]</th>
                <td colspan="6">
                    <textarea style="width:777px" name="pdesc" cols="30" rows="3">小米小米我爱你,就像老鼠爱大米</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="8" align="center">
                    <input type="submit" value="提交" style="width:222px"/>
                </td> 
            </tr>
        </table>
    </form>
    
    
    <!-- 浏览器加载jsp页面时,向服务器发送AJAX请求,获取所有类别信息,并动态的添加到下拉框中 -->
    <script type="text/javascript">
        $(function(){
            var url = "${pageContext.request.contextPath}/CategoryServlet?action=findAllCategory";
            var data = null;
            var callback = function(backData){
                //解析JSON对象
                for(var i=0;i<backData.length;i++){
                    //一个Eclipse插件,它的名字是:JSEclipse插件
                    var cid = backData[i].cid;
                    var cname = backData[i].cname;
                    //创建option标签
                    var $option = $("<option value=‘"+cid+"‘>"+cname+"</option>");
                    //将option标签动态添加select下拉列表框中
                    $("#category").append($option);
                }//for end
            };
            var type = "json";
            $.post(url,data,callback,type);
        });
    </script>
    
  </body>
</html>

 

记一种有图片上传的表单提交

标签:src   class   信息   desc   lag   control   hot   客户端   lca   

原文地址:https://www.cnblogs.com/ly133333333333333/p/9855693.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!