Asp.net 2.0 无刷新图片上传 显示缩略图 具体实现
程序员文章站
2024-03-02 16:08:52
兼容性想还不错:ff,ch,ie,猎豹,都是可以实现的。如果看到回显。当然就是成功了。
经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了。真是煞费苦心啊。但是做出来的...
兼容性想还不错:ff,ch,ie,猎豹,都是可以实现的。如果看到回显。当然就是成功了。
经历了好几天的不停的钻牛角尖,终于将这个二货弄出来了。真是煞费苦心啊。但是做出来的瞬间还是蛮开心的。
第一步:我们需要加载几个js库。
jquery库。
jquery.form.js库。
下载这两个库,并引用到页面中。
以下为页面中 js 代码:
复制代码 代码如下:
function upload() {
var options = {
type: "post", //当然这个是传送方式
url: '../include/files.ashx', //一般处理程序的路径
success: function (msg) { //返回的参数
$("#server_img").attr("src", msg); //回显图片。
}
};
// 将options传给ajaxform
$('#aspnetform').ajaxsubmit(options);
}
第二步:一般处理程序内的代码
复制代码 代码如下:
public void processrequest(httpcontext context)
{
httpfilecollection files = context.request.files; // from中获取文件对象
if (files.count > 0)
{
string path = ""; //路径字符串
random rnd = new random();
for (int i = 0; i < files.count; i++)
{
httppostedfile file = files[i]; //得到文件对象
if (file.contentlength > 0)
{
string filename = file.filename;
string extension = path.getextension(filename);
int num = rnd.next(5000, 10000); //文件名称
path = "../../userfiles/temp/" + num.tostring() + extension;
file.saveas(system.web.httpcontext.current.server.mappath(path)); //保存文件。
}
}
context.response.write(path); //返回文件存储后的路径,用于回显。
}
}
第三步:html或者aspx中的代码。
以下两句代码随便插入html或者aspx中的任意位置。想来都是可以实现的。
复制代码 代码如下:
<img id="server_img" width="360px" style="border: 1px solid #ccc; padding: 2px;" title="" alt="" /> //用于回显图片
<asp:fileupload id="up_load" runat="server" onchange="upload()" ontextchange="upload()"/> //上传图片,自动的,两个事件是为了保证所有浏览器都兼容。