|
如上所示,首先选择准备上传的文件,然后当你点击上传按钮(name为uploadButton)时,调用uploadImage函数,该函数的作用是复制form1的input type=file的imageFile元素到uploadForm中,并替换原始的imageFile的outerhtml(原因是javascript不支持修改input type=file的元素的value属性),当然还有显示可爱的上传进度条(这样显得我们既专业又酷)。
function uploadImage() { var file = document.getElementById("imageFile"); var uploadFormElement = document.getElementById("uploadForm");
//显示进度条 document.getElementById("processDiv").style.display = "block"; // the progress div
//复制图片数据 uploadFormElement.removeChild(uploadFormElement.imageFile); uploadFormElement.appendChild(file); document.getElementById("uploadImageDiv").innerHTML = '<input type="file" id="imageFile" name="imageFile" />';
//提交图片数据 uploadFormElement.submit(); } 当用户点击上传按钮时,工作转由UploadImage.aspx程序接手。 protected void Page_Load(object sender, EventArgs e) { Page.Response.Cache.SetCacheability(HttpCacheability.NoCache); int status = 0;//状态 string message = "";//反馈信息
//检查文件 if (Request.Files.Count == 0) { status = 1; message = "请先选择要上传的文件"; RenderUploadScript(status, message); } string ext = Path.GetExtension(Request.Files[0].FileName).ToLower(); if (ext != ".jpg" && ext != ".jpeg") { status = 2; message = "抱歉,目前仅支持jpg格式的图片"; RenderUploadScript(status, message); } Guid fileID = Guid.NewGuid(); string fileName = Server.MapPath(String.Format("~\\Files\\{0}.jpg",fileID)); Request.Files[0].SaveAs(fileName); //记录到当前页面
RenderUploadScript(0,String.Format( "File.aspx?key={0}",fileID)); }
private void RenderUploadScript(int status, string mess) { string script = string.Format("<script language='javascript'> window.parent.uploadImageResponse(\"{{ status:{0},message:'{1}'}}\"); </script>", status, mess); Response.Write(script); Response.End(); }
通过HttpWebRequest对象,我们能够获得任何由客户端post或get到服务器端的数据,UploadImage.aspx页面的工作很简单,只负责接收post过来的文件,并保存到指定的位置(方便演示,我仅仅使用了SaveAs)。 另外,要注意到一点,由于是Ajax模式的文件上传,意味着你的程序要通过javascript反馈系统出现的问题,这里我通过一个名称为status的参数来返回出现的问题,0则为一切正常,1则为用户没有提供文件,2则为用户没有上传我指定的文件类型。 当用户上传的文件没有任何问题的时候,系统保存文件并返回状态0,并附加文件的显示路径,其他状态附属的信息则是错误信息。 现在回到Default.aspx来看如何接收UploadImage.aspx反馈回来的信息,这里要考虑到UploadImage.aspx是个页面,而且隶属与iframe元素uploadResponse,所以我们通过javascipt来访问uploadResponse的所属window的对象或函数的写法如下: "<script language='javascript'> window.parent.uploadImageResponse(\"{{ status:0,message:'File.aspx?key=guid'}}\");<script>" Default的接应脚本则如下: function uploadImageResponse(response) { document.getElementById("processDiv").style.display = "none"; // hide progresss div var errLabel = document.getElementById("uploadMessage"); errLabel.innerHTML = ""; window.eval("var k=" + response); if (k.status == 1) errLabel.innerHTML = k.message; else if (k.status == 2) errLabel.innerHTML = k.message; else eval("tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'img', { src:'" + k.message + "',style:'border:0px;'}, null);"); }
仅仅是在对应的htm编辑器的内容中插入message附带的信息。
ok!!主要的难点我们都解决了。
共3页: 上一页 [1] 2 [3] 下一页
|