zoukankan      html  css  js  c++  java
  • bs同时上传文件以及文件信息

    上传图片和图片信息时直接在前端将他们放在同一个json 然后异步上传即可:

    前端html:

    <form id="ff" action="" method="post">
    <table>
    <tr>
    <td>名称:</td>
    <td>
    <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
    </tr>
    <tr>
    <td>邮箱:</td>
    <td>
    <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
    </tr>
    <tr>
    <td>标题:</td>
    <td>
    <input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td>
    <textarea name="message" style="height: 60px;"></textarea></td>
    </tr>
    <tr>
    <td>语言:</td>
    <td>
    <select class="easyui-combobox" name="language">
    <option value="ar">Arabic</option>
    <option value="bg">Bulgarian</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>图片:</td>
    <td>
    <input id="ffp" type="file" onclick="showMyImage(this)" multiple="1" />
    <br />
    <img id="thumbnil" style="20%; margin-top:10px;" src="" alt="image" />
    </td>
    </tr>
    </table>
    </form>
    View Code

    前端js:

         function uploadfiles() {
    
           var formData = new FormData();
           //获取文件
            var totalFiles = document.getElementById("ffp").files.length;
            for (var i = 0; i < totalFiles; i++) {
                var file = document.getElementById("ffp").files[i];
                formData.append("FileUpload", file);
            }
           //获取文件外的参数
            params = $('#ff').serializeArray();
            $.each(params, function (i, val) {
                formData.append(val.name, val.value);
            });
           //异步上传
            $.ajax({
                type: "POST",
                url: '/Home/Upload',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                    alert('succes!!');
                },
                error: function (error) {
                    alert("errror");
                }
            });
        }
    View Code

    后台代码(这里是ASP .NET MVC ):

       [HttpPost]
            public JsonResult Upload(FormCollection collection)
            {
                //保存文件
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    HttpPostedFileBase file = Request.Files[i]; //Uploaded file
                                                                //Use the following properties to get file's name, size and MIMEType
                    int fileSize = file.ContentLength;
                    string fileName = file.FileName;
                    string mimeType = file.ContentType;
                    System.IO.Stream fileContent = file.InputStream;
                    //To save file, use SaveAs method
                    file.SaveAs(Server.MapPath("~/") + fileName); //File will be saved in application root
                }
                //获取文件信息(两种方法)
                string var1 = collection["name"];
                var value1 = Request["name"];
                return Json("Uploaded " + Request.Files.Count + " files");
            }
    View Code
  • 相关阅读:
    (hdu 7.1.8)Quoit Design(最低点——在n一个点,发现两点之间的最小距离)
    [Windows]_[0基础]_[使用命令行工具dumpbin分析文件]
    《走开》反馈
    二分基础
    日历的问题C语言,C++(boost),python,Javascript,Java和Matlab实现
    Unity3D 游戏开发架构篇 ——性格一流的设计和持久性
    2015第54周四
    2015第54周三
    2015第54周二
    2015第54周一
  • 原文地址:https://www.cnblogs.com/musexiaoluo/p/6065630.html
Copyright © 2011-2022 走看看