php jq异步上传图片,Jquery实现异步上传图片
利用jQuery的ajax函數(shù)就可以實(shí)現(xiàn)異步上傳圖片了。一開始我是想在處理程序中，直接用context.Request.Files來獲取頁面中的input file，但是不知道為什么一次獲取不了。網(wǎng)上說的，Form中要設(shè)置enctype="multipart/form-data"和 method="post"，input file中要加runat="server"，但都加了依然獲取不到。哪位大俠知道的，求指教啊。
既然后臺獲取不到Input file怎么辦呢。其實(shí)我們上傳文件，主要是獲取到文件的物理地址就行了。只要有了這個(gè)文件地址就可以用bitmap獲取到這個(gè)圖片了。
剛開始我是想用ajax GET來傳送地址，但TMD如果文件名有中文就亂碼了。好在后面改成POST后就可以成功傳送了。
話不多說，上代碼：
前臺：
function uploadImage() {
//判斷是否有選擇上傳文件
var imgPath = $("#uploadFile").val();
if (imgPath == "") {
alert("請選擇上傳圖片！");
return;
}
//判斷上傳文件的后綴名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
alert("請選擇圖片文件");
return;
}
$.ajax({
type: "POST",
url: "handler/UploadImageHandler.ashx",
data: { imgPath: $("#uploadFile").val() },
cache: false,
success: function(data) {
alert("上傳成功");
$("#imgDiv").empty();
$("#imgDiv").html(data);
$("#imgDiv").show();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("上傳失敗，請檢查網(wǎng)絡(luò)后重試");
}
});
}
后臺中的ashx:
public void ProcessRequest (HttpContext context) {
//不知道為什么獲取不到
//HttpPostedFile file = context.Request.Files["userFile"];
string filePath = context.Request["imgPath"];
string path = "UploadImgs\\";
Bitmap map = new Bitmap(filePath);
string fileName = Path.GetFileName(filePath);
string mapPath = context.Server.MapPath("~");
string savePath = mapPath + "\\" + path + fileName;
map.Save(savePath);
//上傳成功后顯示IMG文件
StringBuilder sb = new StringBuilder();
sb.Append("");
context.Response.Write(sb.ToString());
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
使用Ajax以及Jquery.form異步上傳圖片
一.前言 之前做圖片上傳一直用的第三方插件,Uploadify? 這個(gè)應(yīng)該是用的比較多的,相同也用過別的,在方便了自己的同一時(shí)候也非常贊嘆人家的功能. 思來想去,僅僅會用別的人東西,始終自己學(xué)到的少, ...
異步上傳圖片，光用jquery不行，得用jquery.form.js插件
異步上傳圖片,光用jquery不行,得用jquery.form.js插件,百度一下下載這個(gè)插件,加jquery,引入就可以了
C# 異步上傳圖片案例
好久沒寫博客了,都感覺自己快墮落了!今天隨性寫一篇關(guān)于異步上傳圖片的程序及插件! 說是程序及插件,其實(shí)程序占大頭,所謂的插件只是兩個(gè)JS.分別為:jquery.html5upload.js 和 jqu ...
使用Ajax異步上傳圖片的方法(html,javascript,php)
前兩天項(xiàng)目中需要用到異步上傳圖片和顯示上傳進(jìn)度的功能,于是找了很多外國的文章,翻山越嶺地去遇上各種坑,這里寫篇文章記錄一下. HTML
MVC異步上傳圖片到本地/服務(wù)器
這兩天朋友問我,有沒有異步上傳圖片到本地/服務(wù)器這種demo,他有用, 我就想,好吧, 那剛好周末了,整理一套出來. 主要用到的是jquery uploadify 這個(gè)juqery的插件 ,可以無刷新 ...
[Ajax] 使用Ajax異步上傳圖片文件(非Form表單提交)
通過表單Form提交來上傳文件的方式這里就不說了: 下面介紹,通過js中使用ajax異步上傳圖片文件: 新建一個(gè)html頁面和一個(gè)一般處理程序即可: 涉及思路: //發(fā)送2次Ajax請求完成js異步上 ...
隨機(jī)推薦
#數(shù)據(jù)技術(shù)選型#即席查詢Shib+Presto，集群任務(wù)調(diào)度HUE+Oozie
鄭昀 創(chuàng)建于2014/10/30 最后更新于2014/10/31 ? 一)選型:Shib+Presto 應(yīng)用場景:即席查詢(Ad-hoc Query) 1.1.即席查詢的目標(biāo) 使用者是產(chǎn)品/運(yùn)營/銷售 ...
Sea.js創(chuàng)始人玉伯的前端開發(fā)之路
在Web應(yīng)用程序的用戶體驗(yàn)越來越被重視的今天,前端開發(fā)的地位也上升到了前所未有的高度,而隨之而來的也有更多的挑戰(zhàn). 為了將前端開發(fā)者繁重的工作變得簡單,框架應(yīng)運(yùn)而生.國內(nèi)也不乏一些非常優(yōu)秀的前端開發(fā)框 ...
HDU 5510 Bazinga 暴力匹配加剪枝
Bazinga Time Limit: 20 Sec Memory Limit: 256 MB 題目連接 http://acm.hdu.edu.cn/showproblem.php?pid=5510 ...
最全ajax函數(shù)
function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catc ...
springboot 入門三- 讀取配置信息二(讀取屬性文件方式)
在上篇文章中簡單介紹自帶讀取方式.springboot提供多種方式來讀取 一.@ConfigurationProperties(value="my") 支持更靈活的綁定及元數(shù)據(jù)的支 ...
Centos7網(wǎng)絡(luò)配置-轉(zhuǎn)載
一. 查看網(wǎng)絡(luò)地址: centos7取消了ifconfig命令,使用ip addr命令查看IP地址 二.配置網(wǎng)絡(luò) 用VirtualBox安裝的CentOS7,安裝完成后,發(fā)現(xiàn)無法上網(wǎng),于是到網(wǎng)上查了一 ...
Spring boot項(xiàng)目maven的profile多環(huán)境配置不自動(dòng)替換變量的問題解決
Spring boot項(xiàng)目maven的profile多環(huán)境配置不自動(dòng)替換變量的問題解決 ? 在網(wǎng)上找了好久,配置都很簡單,可是我的程序就是不能自動(dòng)替換變量,最終單獨(dú)測試,發(fā)現(xiàn)原來是引用spring b ...
Yii框架的增刪改查總結(jié)分析
一.查詢數(shù)據(jù) 1.findAll(根據(jù)一個(gè)條件查詢一個(gè)集合) $admin=Admin::model()->findAll($condition,$params); $admin=Admin:: ...
19 模塊之shelve xml haslib configparser
shelve 什么是shelve模塊 也是一種序列化方式使用方法 1.opne 2.讀寫 3.close特點(diǎn):使用方法比較簡單 提供一個(gè)文件名字就可以開始讀寫 讀寫的方法和字典一致 你可以把它當(dāng)成帶有 ...
總結(jié)
以上是生活随笔為你收集整理的php jq异步上传图片,Jquery实现异步上传图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JDBC连接数据库的五个步骤、Mybat
- 下一篇： php qcloud sdk weapp