因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览。根据网上代码加以修改做出如下效果图:前台代码如下: 1 <html "http://www.w3.org/1999/xhtml"> 2 <head runat=" ...
因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览。根据网上代码加以修改做出如下效果图:
前台代码如下:
1 <html "http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>上传图片和生成缩略图以及图片预览</title> 5 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 6 <script type="text/javascript" src='/images/loading.gif' data-original="http://code.jquery.com/jquery-1.6.min.js"></script> 7 <script type="text/javascript" src='/images/loading.gif' data-original="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 8 </head> 9 <body>10 <form id="form1" runat="server">11 <table>12 <tr>13 <td>图片上传:14 </td>15 <td>16 <input type="text" id="txtImgPath" class="easyui-textbox" runat="server" style="width: 235px;" />17 <input type="button" id="btnPCImg" value="浏览..." onclick="showFileUp('FileUpload1')"18 class="easyui-linkbutton btn" style="width: 106px;" />19 <asp:FileUpload class="easyui-linkbutton btn" Style="display: none" ID="FileUpload1"20 runat="server" onchange="apendtoText('txtImgPath',this)" />21 <asp:Button class="easyui-linkbutton btn" ID="btnUpFile" runat="server" Text="上传图片"22 OnClick="btnUpFile_OnClick" Width="106px" />23 </td>24 </tr>25 <tr>26 <td>图片预览:27 </td>28 <td>29 <asp:Image ID="Image1" runat="server" />30 <asp:TextBox ID="txtimg" Style="display: none;" runat="server" Height="20px"></asp:TextBox>31 <asp:TextBox ID="oldimgpath" Style="display: none;" runat="server" Height="20px"></asp:TextBox>32 </td>33 </tr>34 </table>35 </form>36 </body>37 <script type="text/javascript">38 /*39 * 显示文件选择框40 * id {String} 要显示的FileUp41 */42 function showFileUp(id) {43 $('#' + id).click();44 }45 /*46 * FileUp控件值改变后将该控件的值赋给其他控件47 * id {String} 接收值的控件ID48 * obj {Object} FileUp控件49 */50 function apendtoText(id, obj) {51 $('#' + id).textbox('setText', $(obj).val());52 }53 </script>54 </html>
原标题:C#上传图片和生成缩略图以及图片预览
关键词:C#
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。