ashx上傳圖片
㈠ ajax+jquery+ashx如何實現上傳文件
第一：建立Default.aspx頁面
<html>
<head runat="server">
<title>ajax圖片上傳</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
function upload(){
var path = document.getElementById("File1").value;
var img = document.getElementById("img1");
if($.trim(path)==""){
alert("請選擇要上傳的文件");
return;
}
$("#form1").ajaxSubmit({
success: function (str) {
if(str!=null && str!="undefined"){
if (str == "1") {alert("上傳成功");document.getElementById("img1").src="images/logo.jpg?"+new Date();/*上傳後刷新圖片*/}
else if(str=="2"){alert("只能上傳jpg格式的圖片");}
else if(str=="3"){alert("圖片不能大於1M");}
else if(str=="4"){alert("請選擇要上傳的文件");}
else {alert('操作失敗！');}
}
else alert('操作失敗！');
},
error: function (error) {alert(error);},
url:'Handler.ashx', /*設置post提交到的頁面*/
type: "post", /*設置表單以post方法提交*/
dataType: "text" /*設置返回值類型為文本*/
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="File1" name="File1" type="file" />
<input id="iptUp" type="button" value="上傳Logo" onclick="upload()"/>
<img id="img1" alt="網站Logo" src="images/weblogo.jpg" />
</form>
</body>
</html>
二、新建一個一般處理文件Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
HttpPostedFile _upfile = context.Request.Files["File1"];
if (_upfile == null)
{
ResponseWriteEnd(context, "4");//請選擇要上傳的文件
}
else
{
string fileName = _upfile.FileName;/*獲取文件名： C:\Documents and Settings\Administrator\桌面\123.jpg*/
string suffix = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();/*獲取後綴名並轉為小寫： jpg*/
int bytes = _upfile.ContentLength;//獲取文件的位元組大小
if (suffix != "jpg")
ResponseWriteEnd(context, "2"); //只能上傳JPG格式圖片
if (bytes > 1024 * 1024)
ResponseWriteEnd(context, "3"); //圖片不能大於1M
_upfile.SaveAs(HttpContext.Current.Server.MapPath("~/images/logo.jpg"));//保存圖片
ResponseWriteEnd(context, "1"); //上傳成功
}
}
private void ResponseWriteEnd(HttpContext context, string msg)
{
context.Response.Write(msg);
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
您可以按照自己的需求來修改，希望對您有幫助！
㈡ 當點擊帶+的圖片時，彈出手機相冊，可以選擇手機相冊內的圖片上傳，代碼如何寫怎麼實現
首先需要引用 js 和css
<!--上傳控制項-->
2<scriptsrc="query.form.min.js"></script>
3<linkhref="Img_List.css"rel="stylesheet"/>
4<scriptsrc="Img_List.js"></script>
Img_List.js 如下：
///<referencepath="../../script/jquery-1.8.0.min.js"/>
//顯示
functionimgshow(obj){
//$(obj).find("a").show();
}
//隱藏
functionimghide(obj){
//$(obj).find("a").hide();
}
//上傳
functionupload(){
$("#FileLoad").click();
}
//刪除
functionimgdel(listId,FileId,hfId){
$.post("/CommonMole/ashx/public.ashx?action=DelMessageImg&Files="+$("#"+hfId).val(),function(result){
if(result!="ok")
$.messager.alert("消息提示","刪除失敗!");
});
varhtml="<li><imgsrc="/Themes/Images/jia.jpg"style="height:80px;width:80px;"/><inputtype="file"id=""+FileId+""class="input"onchange="ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');"name=""+FileId+""/></li>"
$("#"+listId).html(html);
}
//添加成功
functionimgaddhtml(data,code,listId,fileId,hfId){
varlist=data.split(',');
varhtml="<lionmouseover="imgshow(this)"onmouseout="imghide(this);">";
html+="<astyle="height:80px;width:80px;"href=""+list[0]+""target="_blank"><imgsrc=""+list[0]+""imgs=""+list[0]+""code=""+code+""/></a><spanonclick="imgdel('"+listId+"','"+fileId+"','"+hfId+"')"></span></li>";
$("#"+listId).html(html);
}
//圖片文件上傳
//uppath上傳空間id
//上傳成功存放的圖片路徑的隱藏域id
//listId顯示圖片的區域id
functionImgUpload(uppath,hndimg,listId){
varsendUrl="/CommonMole/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath="+uppath;
//開始提交
$("#form1").ajaxSubmit({
beforeSubmit:function(formData,jqForm,options){
//alert(1);
},
success:function(data,textStatus){
varlist=$("#"+hndimg).val();
$("#"+hndimg).val(data.msgbox);
imgaddhtml(data.msgbox,0,listId,uppath,hndimg);
},
error:function(data,status,e){
alert("上傳失敗！");
},
url:sendUrl,
type:"post",
dataType:"json",
timeout:600000
});
};
Img_List.css如下：
.img_list{margin:0px;padding:0px;overflow:hidden;}
.img_listul,.img_listulli{margin:0px;padding:0px;}
.img_listulli{float:left;list-style:none;position:relative;margin:5px0px0px5px;}
.img_listullispan
{position:absolute;top:3px;right:3px;width:16px;height:16px;opacity:0.6;filter:alpha(opacity=60);margin:0002px;
vertical-align:top;background:url('/Themes/Images/panel_tools.png')no-repeat-16px0px;}
.img_listulliimg{width:80px;height:80px;cursor:pointer;position:relative;z-index:0;}
.img_listulli.input{width:80px;height:80px;cursor:pointer;position:relative;left:-100px;vertical-align:top;margin:0px;padding:0px;opacity:0;filter:alpha(opacity=0);}
panel_tools.png 如下：
#region上傳單文件處理===================================
46privatevoidSingleFile(HttpContextcontext)
47{
48
49string_refilepath=context.Request.QueryString["ReFilePath"];//取得返回的對象名稱
50string_upfilepath=context.Request.QueryString["UpFilePath"];//取得上傳的對象名稱
51string_delfile=context.Request.QueryString[_refilepath];
52HttpPostedFile_upfile=null;
53try
54{
55_upfile=context.Request.Files[_upfilepath];
56}
57catch(Exceptione)
58{
59context.Response.Write("{"msg":"0","msgbox":"上傳文件過大！"}");
60context.Response.End();
61}
62bool_iswater=false;//默認不打水印
63bool_isthumbnail=false;//默認不生成縮略圖
64bool_isimage=false;
65
66if(context.Request.QueryString["IsWater"]=="1")
67_iswater=true;
68if(context.Request.QueryString["IsThumbnail"]=="1")
69_isthumbnail=true;
70if(context.Request.QueryString["IsImage"]=="1")
71_isimage=true;
72
73if(_upfile==null)
74{
75context.Response.Write("{"msg":"0","msgbox":"請選擇要上傳文件！"}");
76return;
77}
78UpLoapFiles=newUpLoad();
79stringmsg=upFiles.fileSaveAs(_upfile,_isthumbnail,_iswater,_isimage);
80//刪除已存在的舊文件
81Utils.DeleteUpFile(_delfile);
82//返回成功信息
83context.Response.Write(msg);
84
85context.Response.End();
86}
87#endregion
101publicstringfileSaveAs(HttpPostedFilepostedFile,boolisThumbnail,boolisWater,bool_isImage,bool_isReOriginal)
102{
103try
104{
105stringfileExt=Utils.GetFileExt(postedFile.FileName);//文件擴展名，不含「.」
106stringoriginalFileName=postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"")+1);//取得文件原名
107stringfileName=Utils.GetRamCode()+"."+fileExt;//隨機文件名
108stringdirPath=GetUpLoadPath();//上傳目錄相對路徑
109
110//檢查文件擴展名是否合法
111if(!CheckFileExt(fileExt))
112{
113return"{"msg":"0","msgbox":"不允許上傳"+fileExt+"類型的文件！"}";
114}
115//檢查是否必須上傳圖片
116if(_isImage&&!IsImage(fileExt))
117{
118return"{"msg":"0","msgbox":"對不起，僅允許上傳圖片文件！"}";
119}
120//檢查文件大小是否合法
121if(!CheckFileSize(fileExt,postedFile.ContentLength))
122{
123return"{"msg":"0","msgbox":"文件超過限制的大小啦！"}";
124}
125//獲得要保存的文件路徑
126stringserverFileName=dirPath+fileName;
=dirPath+"small_"+fileName;
128stringreturnFileName=serverFileName;
129//物理完整路徑
130stringtoFileFullPath=Utils.GetMapPath(dirPath);
131//檢查有該路徑是否就創建
132if(!Directory.Exists(toFileFullPath))
133{
134Directory.CreateDirectory(toFileFullPath);
135}
136//保存文件
137postedFile.SaveAs(toFileFullPath+fileName);
138//如果是圖片，檢查圖片尺寸是否超出限制
139if(IsImage(fileExt))
140{
141Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+fileName,3000,3000);
142}
143//是否生成縮略圖
144if(IsImage(fileExt)&&isThumbnail)
145{
146Thumbnail.MakeThumbnailImage(toFileFullPath+fileName,toFileFullPath+"small_"+fileName,150,150,"R");
147//returnFileName+=","+serverThumbnailFileName;//返回縮略圖，以逗號分隔開
148}
149
166/
171return"{"msg":"1","msgbox":""+returnFileName+""}";
172}
173catch
174{
175return"{"msg":"0","msgbox":"上傳過程中發生意外錯誤！"}";
176}
177}
㈢ extjs怎樣做圖片上傳
1.代碼如下：
復制代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架開始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架結束-->
11 <script type="text/javascript">
12 Ext.onReady(function () {
13 //初始化標簽中的Ext:Qtip屬性。
14 Ext.QuickTips.init();
15 Ext.form.Field.prototype.msgTarget = 'side';
16 //創建div組件
17 var imagebox = new Ext.BoxComponent({
18 autoEl: {
19 style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
20 tag: 'div',
21 id: 'imageshow',
22 html: '暫無圖片'
23 }
24 });
25 //創建文本上傳域
26 var file = new Ext.form.TextField({
27 name: 'imgFile',
28 fieldLabel: '文件上傳',
29 inputType: 'file',
30 allowBlank: false,
31 blankText: '請瀏覽圖片'
32 });
33 //提交按鈕處理方法
34 var btnsubmitclick = function () {
35 if (form.getForm().isValid()) {
36 form.getForm().submit({
37 waitTitle: "請稍候",
38 waitMsg: '正在上傳...',
39 success: function (form, action) {
40 Ext.MessageBox.alert("提示", "上傳成功！");
41 document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
42 },
43 failure: function () {
44 Ext.MessageBox.alert("提示", "上傳失敗！");
45 }
46 });
47 }
48 }
49 //重置按鈕"點擊時"處理方法
50 var btnresetclick = function () {
51 form.getForm().reset();
52 }
53 //表單
54 var form = new Ext.form.FormPanel({
55 frame: true,
56 fileUpload: true,
57 url: '/App_Ashx/Demo/Upload.ashx',
58 title: '表單標題',
59 style: 'margin:10px',
60 items: [imagebox, file],
61 buttons: [{
62 text: '保存',
63 handler: btnsubmitclick
64 }, {
65 text: '重置',
66 handler: btnresetclick
67 }]
68 });
69 //窗體
70 var win = new Ext.Window({
71 title: '窗口',
72 width: 476,
73 height: 374,
74 resizable: true,
75 modal: true,
76 closable: true,
77 maximizable: true,
78 minimizable: true,
79 buttonAlign: 'center',
80 items: form
81 });
82 win.show();
83 });
84 </script>
85 </head>
86 <body>
87 <!--
88 說明：
89 (1)var imagebox = new Ext.BoxComponent():創建一個新的html標記。
90 官方解釋如下：
91 This may then be added to a Container as a child item.
92 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
93 (2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暫無圖片'}定義這個html標記的屬性，如 標記為：div，id是多少等。
94 官方實例為：
95 var myImage = new Ext.BoxComponent({
96 autoEl: {
97 tag: 'img',
98 src: '/images/my-image.jpg'
99 }
100 });
101 (3)var file = new Ext.form.TextField()：創建一個新的文件上傳域。
102 (4)name: 'imgFile':名稱，重要，因為service端要根據這個名稱接收圖片。
103 (5)inputType: 'file'：表單類型為文件類型。
104 (6)waitTitle: "請稍候",waitMsg: '正在上傳...',：上傳等待過程中的提示信息。
105 (7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';這個是原生態的js，把imageshow的值換成圖片。
106 -->
107 </body>
108 </html>
復制代碼
其中與service交互用上傳圖片的 一般處理程序文件，源碼如下：
/App_Ashx/Demo/Upload.ashx
復制代碼
1 using System;
2 using System.Web;
3 using System.IO;
4 using System.Globalization;
5
6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
7 {
8 public class Upload : IHttpHandler
9 {
10 public void ProcessRequest(HttpContext context)
11 {
12 //虛擬目錄，建議寫在配置文件中
13 String strPath = "/Upload/Image/";
14 //文件本地目錄
15 String dirPath = context.Server.MapPath(strPath);
16 //接收文件
17 HttpPostedFile imgFile = context.Request.Files["imgFile"];
18 //取出文件擴展名
19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
20 //重新命名文件
21 String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
22 //文件上傳路徑
23 String filePath = dirPath + newFileName;
24 //保存文件
25 imgFile.SaveAs(filePath);
26 //客戶端輸出
27 context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
28 }
29
30 public bool IsReusable
31 {
32 get
33 {
34 return false;
35 }
36 }
37 }
38 }
復制代碼
2.效果如下：
無廢話extjs
3.說明：
(1)上傳域不光可以上傳圖片，還要以上傳其他文件。這里我們以圖片為例。
(2)在實際開發中，我們還要對圖片格式，大小等進行校驗，這個示例測重於上傳，沒有加入任何校驗。
㈣ asp.net 一般處理程序（ashx）如何多次接收上傳文件（多文件批量上傳）
Like this ：
比如前台有3個INPUT：
<form enctype= "multipart/form-data">
<INPUT style= "WIDTH: 480px; HEIGHT: 22px " type= "file " name= "File " size= "60 ">
<INPUT style= "WIDTH: 480px; HEIGHT: 22px " type= "file " name= "File " size= "60 ">
<INPUT style= "WIDTH: 480px; HEIGHT: 22px " type= "file " name= "File " size= "60 ">
</form>
然後後台：
HttpFileCollection files = HttpContext.Current.Request.Files;
//這個files裡面就是你上傳文件的集合。遍歷即可。
㈤ jquery+ajax+ashx 圖片上傳問題，各位大神幫忙看看這樣寫對嗎
圖片上傳需要使用表單提交，ajax 提交是無法提交file的。建議使用Form，然後ajaxsubmit
㈥ ueditor .net圖片上傳不成功
這個問題很好解決。
只要刪除ashx文件里第一行代碼就行了。具體刪除哪一行，我現在也不知道了，因為已經刪除了。
不過我可以給你看看刪除後的代碼，你對比一下，多了哪一行就把哪一行刪除就行。
ueditor下面的net下面所有ashx文件都要刪除代碼。
以imageUp.ashx為例子。
<%@WebHandlerLanguage="C#"Class="imageUp"%>
usingSystem;
usingSystem.Web;
usingSystem.IO;
usingSystem.Collections;
㈦ aspx頁面中有一些數值,把它傳個ashx頁面,ashx頁面動態生成一張圖片
這個簡單多了，只要你能夠傳一個獲取byte數組的參數到ashx頁面，然後在裡面Response.AddHeader("Content-type", "image/jpeg");
Response.BinaryWrite(buffer);
就可以生成一張圖片了，如果想調用這張圖片就把image控制項的src設置為ashx的路徑即可。
㈧ 用jquery實現ajax 上傳圖片提交到PHP
好像不可以吧，瀏覽器為了安全不能用javascript讀取本地文件的
㈨ kindeditor-4.1.3中ASP.NET上傳圖片配置
我也遇到過，如果在引用里添加了LitJSON.dll的話，仔細檢查下面的路徑
<head runat="server">
<title>add news</title>
<link href="../kindeditor-4.1.7/themes/default/default.css" rel="stylesheet" type="text/css" />
<link href="../kindeditor-4.1.7/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script src="../kindeditor-4.1.7/kindeditor.js" type="text/javascript"></script>
<script src="../kindeditor-4.1.7/lang/zh_CN.js" type="text/javascript"></script>
<script src="../kindeditor-4.1.7/plugins/code/prettify.js" type="text/javascript"></script>
<script>
KindEditor.ready(function (K) {
var editor1 = K.create('#content1', {
cssPath: '../kindeditor-4.1.7/plugins/code/prettify.css',
uploadJson: '../kindeditor-4.1.7/asp.net/upload_json.ashx',
fileManagerJson: '../kindeditor-4.1.7/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</head>
尤其是這兩句
uploadJson: '../kindeditor-4.1.7/asp.net/upload_json.ashx',
fileManagerJson: '../kindeditor-4.1.7/asp.net/file_manager_json.ashx',
㈩ ueditor .net 1.4.3 怎麼把圖片上傳路徑傳給controller.ashx
在ueditor.config.js中修改伺服器統一請求介面路徑
serverUrl: URL + "net/controller.ashx"，鏈接到你controller所在的位置