首页
Homepage
课程选择
Course select
实践乐园
Praticse
学霸专栏
Coolman
个人中心
Manager
通知
News
理论考试
Test
实验组作品
Student Work
注册
Registe
资料查看下载交界面
班级名称:
Label
课程名称:
C sharp程序设计
851
CK2R04A
标 题:
说明 后台添加图片过程说明
<p> 1、function函数中添加 </p> <p> upfile(); </p> <p> 2、脚本函数添加2个,注意对应的控件名为:tupian </p> <p> function upfile() {<br /> var fileInput = document.getElementById('txt_fileup'),<br /> info = document.getElementById('test-file-info'),<br /> preview = document.getElementById('test-image-preview');<br /> // 监听change事件:<br /> fileInput.addEventListener('change', function () {<br /> // 清除背景图片:<br /> preview.style.backgroundImage = '';<br /> // 检查文件是否选择:<br /> if (!fileInput.value) {<br /> info.innerHTML = '没有选择文件';<br /> return;<br /> }<br /> // 获取File引用:<br /> var file = fileInput.files[0];<br /> //判断文件大小<br /> var size = file.size;<br /> if (size >= 10 * 1024 * 1024) {<br /> alert('文件大于10兆不行!');<br /> return false;<br /> }<br /> // 获取File信息:<br /> $('#tupian').val('img/' file.name);<br /> info.innerHTML = '文件: ' file.name '<br>' <br /> '大小: ' file.size '<br>' <br /> '修改: ' file.lastModifiedDate;<br /> if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {<br /> alert('不是有效的图片文件!');<br /> return;<br /> }<br /> // 读取文件:<br /> var reader = new FileReader();<br /> reader.onload = function (e) {<br /> var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...}' <br /> preview.src = "data:" data;<br /> //preview.src = 'url(' data ')';<br /> //alert(1);<br /> };<br /> // 以DataURL的形式读取文件:<br /> reader.readAsDataURL(file);<br /> console.log(file);<br /> formDataUpload();<br /> });<br /> }<br /> <br /> function formDataUpload() {<br /> var fileupload = document.getElementById('txt_fileup').files;<br /> var formdata = new FormData();<br /> formdata.append('files', fileupload[0]);<br /> var xmlHttp = new XMLHttpRequest();<br /> xmlHttp.open("post", '/ljxupfile.ashx?method=formDataUpload');<br /> xmlHttp.onreadystatechange = function () {<br /> if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {<br /> //alert('上传成功');<br /> }<br /> }<br /> xmlHttp.send(formdata);<br /> } </p> <p> 3、function edit()函数编辑图片显示修改 </p> <p> $("#test-image-preview").attr('src', '/' $('#tupian').val()); </p> <p> 4、html控件添加 </p> <p> <tr style="background-color: White; height: 32px;"> <br /> <td style="width: 80px; padding-left: 5px"><br /> 图片<br /> </td><br /> <td style="padding: 5px" colspan="5"><br /> <br /> <form method="post" enctype="multipart/form-data" id="file_upload" style="display:inline-flexbox"><br /> <br /> <!--<div id="test-image-preview"></div>--><br /> <img id="test-image-preview" style="width:100px;height:100px"/><br /> <p><br /> <input id="tupian" type="text" style="border: 1px solid #8DB2E3; width: 100px; height: 20px" /><br /> <input type="file" id="txt_fileup" name="test" accept="image/gif, image/jpeg, image/png, image/jpg" /><br /> </p><br /> <p id="test-file-info"></p><br /> </form><br /> </td> <br /> </tr> </p> <p> 5、后台ljxupfile.ashx覆盖2函数 </p> <p> public void ProcessRequest(HttpContext context)<br /> {<br /> context.Response.ContentType = "text/plain";<br /> context.Response.Write("Hello World");<br /> formDataUpload(context);//uploadfile<br /> }<br /> <br /> private static void formDataUpload(HttpContext context)<br /> {<br /> string method = Convert.ToString(context.Request.QueryString["method"]);<br /> <br /> if (method != "formDataUpload")<br /> return;<br /> <br /> HttpFileCollection files = context.Request.Files;<br /> <br /> string msg = string.Empty;<br /> string error = string.Empty;<br /> if (files.Count > 0)<br /> {<br /> files[0].SaveAs(HttpRuntime.AppDomainAppPath "img\\" System.IO.Path.GetFileName(files[0].FileName));<br /> //files[0].SaveAs(ConfigurationManager.AppSettings["FilePath"].ToString() System.IO.Path.GetFileName(files[0].FileName));<br /> <br /> <br /> msg = " 成功! 文件大小为:" files[0].ContentLength;<br /> string res = "{ error:'" error "', msg:'" msg "'}";<br /> context.Response.Write(res);<br /> context.Response.End();<br /> }<br /> } </p>
Copyright ? 2015 All Rights Reserved.
备案:
浙ICP备16014922