上传图片和图片信息时直接在前端将他们放在同一个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>
前端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"); } }); }
后台代码(这里是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"); }