网上图片上传插件很多,我这列出一个最基本的图片及文件上传
步骤:
1.获取file文件数据。
2.ajax的post请求提交数据或xml最原始提交数据。
3.后台保存数据
缺点:后台只能拿到数据流,哪不到文件类型和名称。
代码如下
html
<input type="file" class="file" name="User_Img1" id="User_Img1" accept="image/jpeg,image/gif,image/png,image/bmp">
<input type="file" class="file" name="User_Img1" id="User_Img2" accept="image/jpeg,image/gif,image/png,image/bmp">
js
<script src="js/jquery-1.10.2.js"></script> <script> $(function () { //原始xhr提交 $("#User_Img1").on("change", function () { var reader = new FileReader(); reader.readAsArrayBuffer($(this)[0].files[0]); reader.onload = function () { var data = this.result; var url = "/upload/uploadimg"; var xhr = new XMLHttpRequest(); xhr.addEventListener("load", uploadComplete, false); xhr.open("POST", url, false); xhr.send(data); } }); //ajax分装的提交 $("#User_Img2").on("change", function () { var data = $(this)[0].files[0]; //var form = new FormData(data); $.ajax({ url: '/upload/UploadImg', type: 'post', //发送到服务器端的数据的格式,取消默认编码格式 contentType: false, dataType: 'json', data: data, //因为是图片,不要对其作序列化处理 processData: false, success: function (data) { if (data) { alert(data); } }, err: function (jqHXR) { console.log(jqXHR.status); } }); }); }) function uploadComplete(evt) { var json = eval('(' + evt.target.responseText + ')'); $("#User_Img").val(json); } </script>
c#后台代码MVC的,Web的基本一样
[HttpPost] public ActionResult UploadImg() { JsonResult code = new JsonResult(); // code.Data = QueryInfo(order); string uploadDate = DateTime.Now.ToString("yyyyMMdd"); string guid = Guid.NewGuid().ToString(); //string virtualPath = string.Format("/Upload/{0}", uploadDate); string virtualPath = string.Format("/Upload/{0}/{1}{2}", uploadDate, guid, ".jpg"); string path = Server.MapPath(virtualPath); //创建文件夹,保存文件 string pathFile = Path.GetDirectoryName(path); Directory.CreateDirectory(pathFile); FileStream fs = new FileStream(path, FileMode.Create); Request.InputStream.CopyTo(fs); fs.Flush(); fs.Close(); code.Data = uploadDate; return code; }