尝试在一行中添加多个图像

时间:2017-11-30 12:13:15

标签: javascript c# jquery ajax oracle

我试图在oracle数据库的一个字段中的单行中插入多个图像,请建议如何实现它。以下是详细信息 图像在浏览器上呈现,我想在oracle db中通过它存储多个图像。每个图像都会有一个动态生成的id

aspx代码:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

            <!DOCTYPE html>
            <html>
            <head>
                <style>        
             input[type="file"] {

             display:block;
            }
            .imageThumb {
             max-height: 75px;
             border: 2px solid;
             margin: 10px 10px 0 0;
             padding: 1px;
             }
                 </style>
                <title></title>
            </head>
            <body>
                <form id="form1" runat="server">
                    Find the bellow HTML code
                    <h2>preview multiple images before upload using jQuery</h2>
                    <input type="file" id="files" name="files[]" multiple />
<asp:Button ID="Button3" runat="server" BorderColor="#CCFF66"   
ForeColor="#0066FF"  Text="Insert Data" />  
                </form>
                <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

                <script type="text/javascript">
                    $(document).ready(function () {
        var a = 0;
                        if (window.File && window.FileList && window.FileReader) {
                            $("#files").on("change", function (e) {
                                var files = e.target.files,
                                filesLength = files.length;
        if (filesLength == 1) {                        
                                a = a + 1;
                            }
                                for (var i = 0; i < filesLength ; i++) {
                                    var f = files[i]
                                    var fileReader = new FileReader();
                                    fileReader.onload = (function (e) {
                                        var file = e.target;
                                        $("<img></img>", {
                                            class: "imageThumb",
        Id: "img"+ a.toString(),
                                            src: e.target.result,
                                            title: file.name
                                        }).insertAfter("#files");
                                    });
                                    fileReader.readAsDataURL(f);
                                }
                            });
                        } else { alert("Your browser doesn't support to File API") }
                    });
                </script>

            </body>
            </html>

用于将映像保存到oracle db我使用ajax并创建了webservice来将数据推送到db:

[WebMethod]
         public static void SaveUser(User user)
            {
         String connectionString = ConfigurationManager.ConnectionStrings["conndbprodnew"].ConnectionString;
                using (OracleConnection con = new OracleConnection(connectionString))
                {
                    using (OracleCommand cmd = new OracleCommand("INSERT INTO par_cinfo(Product_Id,IMAGETYPE ) VALUES (:IMAGETYPE )", con))
                    {
                        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("IMAGETYPE ", user.IMAGETYPE);
                        cmd.Connection = con;
                        con.Open();
                        cmd.ExecuteNonQuery();               
                        con.Close();
                    }
          }
            }

        }

        public class User
        {
        public decimal Product_Id { get; set; }
            public Image IMAGETYPE { get; set; }

        }

点按钮上的jQuery ajax将数据发送到webservices:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript">
    $(function () {
            $("[id*=Button3]").bind("click", function () {
                var user = {};
                user.Product_Id = 1;
                user.IMAGETYPE= "here dynamic image id which is uploaded should be present "
     $.ajax({
                    type: "POST",
                    url: "Default.aspx/SaveUser",
                    data: '{user: ' + JSON.stringify(user) + '}',
                    //data: JSON.stringify({user:user}),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("User has been added successfully.");
                        window.location.reload();
                    }
                });
                return false;
            });
        });
    </script>

我在oracle中创建的表格仅用于输入表格中的数据:

  Create table par_cinfo
             (
              Product_Id         NUMBER(10) NOT NULL PRIMARY KEY,
              IMAGETYPE          BLOB    
              ) 

0 个答案:

没有答案