jquery.uploadView实现图片预览上传功能

图片上传，网上有好多版本，今天也要做一个查了好多最终找到了一个上传视图进行了一下修改

来看代码

@ { Layout=null}！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title index/title script src=' http : ~/Scripts/jquery-1。8 .2 .量滴js '/script script src=' http : ~/Scripts/jquery。上传视图。js '/脚本/头dy div '上川' H4示例/H4 div class=' js _ uploadBox ' style=' position : relative ' div id=' preview ' class=' js _ showBox ' img id=' imghead ' border=' 0 ' src=' http :http://static。内韩红宝。com/high ads/images/nologo。jpg ' alt='上传图片style=' width :100 px h8 :100 px '/div输入类型=' file ' name=' file ' id=' id ' style=' position : absolute；top: 0pxleft:0px高度： 100像素；滤镜： alpha(opa city 33600)；opa城市3360 0；宽度： 100px ' onclick=' Upload()'/div输入类型=' hidTmp ' ID=' hidTmp _ ID '名称='Tmp_ID '值=''//div /div/body/htmlscript类型='text/javascript '函数上传(){ $(“# id”).uploadView({ uploadbox : }).js_uploadBox '，//设置上传框容器showBox: ' .js_showBox '，//设置显示预览图片的容器宽度： '100 ',//预览图片的宽度，单位像素高度： '100 ',//预览图片的高度，单位px allowType: ['gif '，' jpeg '，' jpg '，' bmp '，' png']，//允许上传图片的类型maxSize:1，//允许上传图片的最大尺寸，单位m成功：函数{ var l=$(' .js _ ShowBox img ').attr(' src ')；$('#hidTmp_ID ').val(l)；} });}/脚本代码前台看起来很简单。

实现的效果也还可以，不过这个保存的是base64的图片，插入数据库的时候我们一般都是保存xxxx.jpg故需要实现一个方法

///摘要///base64转图片////摘要////返回/返回公共静态字符串BaseToImg(字符串baseimg){ byte[]Bt=Convert .FromBase64String(baseimg .替换(' data : image/JPEG；base64 '，' ')；字符串文件路径='ImgServer ' .GetAppsetting()；字符串sqlurl=@'' DateTime .现在。to字符串(' yyyyMMdd ')' \ \ '；字符串sqlname='' DateTime .现在。ToString(' yyymddhmmssmsfff ').jpg '；if(！系统。文件存在（文件路径sqlurl)){ 0系统IO。目录。创建目录(文件路径SQL网址)；系统IO。文件。writelbytes(文件路径SQL URL SQL名称，Bt)；}返回sqlurl sqlname}这里我是根据日期对文件夹分组了，并且保存到数据库。避免单个文件太大

效果图类似这样

这个同样也适用于手机上

总结

以上所述是小编给大家介绍的jquery.uploadView实现图片预览上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！