layui上传图片以二进制流保存
作者:互联网
前端:
<div class="layui-form-item"> <label class="layui-form-label" style="width:100px">图形名称</label> <div class="layui-input-inline"> <input type="text" name="PicName" id="PicName" lay-verify="title" placeholder="请输入" autocomplete="off" class="layui-input" style="width:220px"> <input type="text" name="PicChoose" id="PicChoose" style="display: none"> </div> <div class="layui-upload" style="margin-left: 380px;"> <button type="button" class="layui-btn" id="uploadImg" style="margin-left: 20px">选择图片</button> <button id="hideUpload" type="button" style="display: none"></button> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" style="text-align:center"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> <div class="layui-upload-list" style="margin-left:300px"> <p id="demoText"></p> <div style="width:220px;height:300px;background: white;margin-top: 20px"><img class="layui-upload-img" id="demo1"></div> </div> </div> <script> //图片上传 var uploadInst = upload.render({ elem: '#uploadImg' //绑定点击按钮 , url: '/EXFactoryBaseData/uploadPicFile' //访问后台路径 , accept: 'images' //图片格式 , auto: false //取消自动上传 , method: 'post' //请求上传的 http 类型 , bindAction: '#hideUpload' //绑定真正的上传按钮 , data: { //访问后台提交的数据 // name: $('#a').val() baseId: function(){return baseId}, fileName: () => { return $('#demo1').val();//官方文档说明:实现动态传值 } } , choose: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr({ src: result, width: "220", height: "300" });//图片链接(base64) }); var PicChoose = "1"; $('#PicChoose').val(PicChoose); } , done: function (res) { var result = JSON.parse(res) //如果上传失败 if (result.code > 0) { return layer.msg('图片上传失败!'); } //上传成功 layer.msg("图片上传成功!", { time: 1000 }, function () { //重新加载页面 location.reload(); }); } , error: function () { //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); }); </script>
后端:
/// <summary> /// 上传图片信息 /// </summary> /// <returns></returns> [HttpPost] public string uploadPicFile() { string baseId = Request["baseId"].ToString(); string PicName = Request["PicName"].ToString(); string code = "0", msg = ""; string[] imgInfo = Request.Files[0].FileName.Split('.'); if (!(imgInfo[1] == "bmp" || imgInfo[1] == "jpg" || imgInfo[1] == "jpeg" || imgInfo[1] == "png")) { msg = "上传的文件格式不对!"; return "{\"code\":\"-1\", \"msg\":\"" + msg + "\"}"; } HttpPostedFileBase file = Request.Files[0]; string name = file.FileName; Stream fileStream = file.InputStream; byte[] byimg = GetBytesFromImage(fileStream); int result = BLL.uploadPicFile(byimg, baseId, PicName); return "{\"code\":\"0\", \"msg\":\"\"" + "}"; } //转流方法 public byte[] GetBytesFromImage(Stream filename) { Stream fs = filename; int length = (int)fs.Length; byte[] image = new byte[length]; fs.Read(image, 0, length); fs.Close(); return image; }
后面直接将二进制流保存到数据库就可以了
标签:function,return,string,二进制,layui,result,msg,上传 来源: https://www.cnblogs.com/lily15146/p/16446295.html