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" οnclick="showMyImage(this)" multiple="1" />
<br />
<img id="thumbnil" style="width: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

 

转载于:https://www.cnblogs.com/musexiaoluo/p/6065630.html