jqajax上傳圖片
Ⅰ jsp中使用jquery的ajaxfileupload插件怎麼實現非同步上傳
JSP頁面中引入的script代碼
<script>
function
ajaxFileUpload()
{
$("#loading").ajaxStart(function(){
$(this).show();
})//開始上傳文件時顯示一個圖片
.ajaxComplete(function(){
$(this).hide();
});//文件上傳完成將圖片隱藏起來
$.ajaxFileUpload({
url:'AjaxImageUploadAction.action',//用於文件上傳的伺服器端請求地址
secureuri:false,//一般設置為false
fileElementId:'imgfile',//文件上傳空間的id屬性
<input
type="file"
id="imgfile"
name="file"
/>
dataType:
'json',//返回值類型
一般設置為json
success:
function
(data,
status)
//伺服器成功響應處理函數
{
alert(data.message);//從伺服器返回的json中取出message中的數據,其中message為在struts2中定義的成員變數
if(typeof(data.error)
!=
'undefined')
{
if(data.error
!=
'')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error:
function
(data,
status,
e)//伺服器響應失敗處理函數
{
alert(e);
}
}
)
return
false;
}
</script>
struts.xml配置文件中的配置方法：
<struts>
<package
name="struts2"
extends="json-default">
<action
name="AjaxImageUploadAction"
class="com.test.action.ImageUploadAction">
<result
type="json"
name="success">
<param
name="contentType">text/html</param>
</result>
<result
type="json"
name="error">
<param
name="contentType">text/html</param>
</result>
</action>
</package>
</struts>
上傳處理的Action
ImageUploadAction.action
package
com.test.action;
import
java.io.File;
import
java.io.FileInputStream;
import
java.io.FileOutputStream;
import
java.util.Arrays;
import
org.apache.struts2.ServletActionContext;
import
com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public
class
ImageUploadAction
extends
ActionSupport
{
private
File
imgfile;
private
String
imgfileFileName;
private
String
imgfileFileContentType;
private
String
message
=
"你已成功上傳文件";
public
File
getImgfile()
{
return
imgfile;
}
public
void
setImgfile(File
imgfile)
{
this.imgfile
=
imgfile;
}
public
String
getImgfileFileName()
{
return
imgfileFileName;
}
public
void
setImgfileFileName(String
imgfileFileName)
{
this.imgfileFileName
=
imgfileFileName;
}
public
String
getImgfileFileContentType()
{
return
imgfileFileContentType;
}
public
void
setImgfileFileContentType(String
imgfileFileContentType)
{
this.imgfileFileContentType
=
imgfileFileContentType;
}
public
String
getMessage()
{
return
message;
}
public
void
setMessage(String
message)
{
this.message
=
message;
}
@SuppressWarnings("deprecation")
public
String
execute()
throws
Exception
{
String
path
=
ServletActionContext.getRequest().getRealPath("/upload/mri_img_upload");
String[]
imgTypes
=
new
String[]
{
"gif",
"jpg",
"jpeg",
"png","bmp"
};
try
{
File
f
=
this.getImgfile();
String
fileExt
=
this.getImgfileFileName().substring(this.getImgfileFileName().lastIndexOf(".")
+
1).toLowerCase();
/*
if(this.getImgfileFileName().endsWith(".exe")){
message="上傳的文件格式不允許!!!";
return
ERROR;
}*/
/**
*
檢測上傳文件的擴展名是否合法
*
*/
if
(!Arrays.<String>
asList(imgTypes).contains(fileExt))
{
message="只能上傳
gif,jpg,jpeg,png,bmp等格式的文件!";
return
ERROR;
}
FileInputStream
inputStream
=
new
FileInputStream(f);
FileOutputStream
outputStream
=
new
FileOutputStream(path
+
"/"+
this.getImgfileFileName());
byte[]
buf
=
new
byte[1024];
int
length
=
0;
while
((length
=
inputStream.read(buf))
!=
-1)
{
outputStream.write(buf,
0,
length);
}
inputStream.close();
outputStream.flush();
}
catch
(Exception
e)
{
e.printStackTrace();
message
=
"文件上傳失敗了!!!!";
}
return
SUCCESS;
}
}
轉載，僅供參考。
Ⅱ jquery如何將頁面生成的圖片上傳到伺服器
File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>
Ⅲ jquery photoclip 怎麼提交
jquery截取圖片後，ajax非同步提交該圖片
如何用form非同步提交已經截取的圖片呢？因為後台(springMVC)用到組件上傳圖片，需要圖片類型list。
解決思路：截取圖片是base64，將base64存入form的input，type=file中，提交form即可。
[html] view plain
<script type="text/javascript" src="assets/wap/kuaiqin/js/jquery-1.12.2.min.js" ></script>
<script src="assets/wap/kuaiqin/js/iscroll-zoom.js"></script>
<script src="assets/wap/kuaiqin/js/hammer.js"></script>
<script src="assets/wap/kuaiqin/js/jquery.photoClip.js"></script>
<script type="text/javascript" src="assets/wap/kuaiqin/js/xx.js"></script>
[html] view plain
<img id="xiaotu" src="assets/wap/kuaiqin/img/share_feng.jpg" style="width:65px;height:65px;position:absolute;left:18px;top:-25px;">
[html] view plain
<input type="file" id="face_upload" name="temp_img" style="display:none">
<form method="post" encType="multipart/form-data"></form>
[html] view plain
<!-- 圖片處理 -->
<div id="img_screen" style="position:absolute;top:0;width:100%;background:#000;overflow:hidden;display:none;"></div>
<div id="img_box" style="position:absolute;top:0;width:100%;display:none;margin-top:20%;">
<div id="clipArea" style="margin:20px;height: 300px;"></div>
</div>
<button id="clipBtn" style="position:absolute;top:0;right:0;border:0;color:#fff;background:#000;display:none;">確定</button>
<!-- end -->
[html] view plain
$("#xiaotu").click(function(){//點擊圖片彈出文件夾
$("#face_upload").click();
});
[html] view plain
$("#face_upload,#smrz_upload").change(function(){//選擇圖片之後，將圖片放到截取框中截取
var objUrl=getObjectURL(this.files[0]);
if(objUrl){
$(window).scrollTop(0);
$("#img_screen").show();
$("#img_box").show();
$("#clipBtn").show();
}
})
[html] view plain
function getObjectURL(file){//獲取選擇圖片的base64
var url=null
if(window.createObjectURL!=undefined){ // basic
url=window.createObjectURL(file)
}else if(window.URL!=undefined){ // mozilla(firefox)
url=window.URL.createObjectURL(file)
} else if(window.webkitURL!=undefined){ // webkit or chrome
url=window.webkitURL.createObjectURL(file)
}
return url
}
[html] view plain
var base64=null;
$("#img_screen").css("height",$(window).height());
$("#clipArea").photoClip({
width: 200,
height: 200,
file: "#face_upload",
ok: "#clipBtn",
clipFinish: function(dataURL) {
$('#xiaotu').attr("src", dataURL);
$('#datu').attr("src", dataURL);
base64=dataURL;
}
});
$("#clipBtn").click(function(){
convertToFile(base64);
});
[html] view plain
function convertToFile(base64Codes){//將base64轉化blob，並放到form中
var form=document.forms[0];
var formData = new FormData(form);
var img_name=$("#face_upload").val();
formData.append("img",convertBase64UrlToBlob(base64Codes),img_name);//img是input的name屬性，與後台的對應即可
$.ajax({//提交表單，非同步上傳圖片
url : "api/public/uploadImg",
type : "POST",
data : formData,
dataType:"json",
processData : false, // 告訴jQuery不要去處理發送的數據
contentType : false, // 告訴jQuery不要去設置Content-Type請求頭
success:function(data){
imgurl=data.imgs[0];
subuserinfo_face(imgurl);
}
});
}
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換為byte
//處理異常,將ascii碼小於0的轉換為大於0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
Ⅳ jQuery+ajax文件上傳失敗，什麼原因
大部分 都是超出了 伺服器的上傳大小限制
還有就是 ajax 上傳類型是否正確設置 ，類型轉換檢查錯誤沒，示例代碼：
var data = new FormData();
data.append('file', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'ajax.php',
data: data,
processData: false,
type: 'POST'
contentType: 'multipart/form-data',
mimeType: 'multipart/form-data',
success: function (data) {
alert(data);
}
});
Ⅳ 用js、jquery如何實現上傳圖片的預覽
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//獲得表單元素
HttpPostedFile oFile = context.Request.Files[0];
//設置上傳路徑
string strUploadPath = "temp/";
//獲取文件名稱
string fileName = context.Request.Files[0].FileName;
補充：JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標准通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。
Ⅵ img如何接收jquery ajax非同步上傳的動態圖片
你的表述沒看懂，jquery 非同步上傳過後獲取路徑 直接給img 的src賦值不就完了？
Ⅶ 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;
}
}
}
您可以按照自己的需求來修改，希望對您有幫助！
Ⅷ jquery ajax動態載入圖片
一般驗證碼使用的是伺服器上的一個動態生成圖片的腳本文件，比如PHP，然後利用 header 函數輸出為圖片。如 <img scr="http://www.163.com/validate.php"> 其中訪問 validate.php 文件會向瀏覽器輸出一張圖片。
而你是想使用AJAX非同步方式，這樣的話上面的方式不太可行了，前提是你必須去訪問這個 validate.php 文件讓其生成新的驗證碼，但AJAX無法返回像圖片這種流數據出來，一般是JSON類型的字元。這樣的話，你只能讓AJAX訪問這個validate.php 文件，讓其把驗證碼圖片生成在伺服器上，然後返回這張驗證碼圖片的新地址，再在頁面操作這個<img> 的 src 屬性即可。
Ⅸ 用jqueryajax實現點擊圖片提交form問題，怎麼解決
給圖片加個ID屬性 如： <img src="" id="img_id"/>
$("#img_id").click(function(){
$.ajax({
type:'POST',
url:"love.php",
data:'id='+id,
success:function(data){
love.html(data);
love.fadeIn(300);
}
});
})
非同步提交
Ⅹ js/jquery上傳圖片的問題
你可以使用jquery的一個插件uploadify，官網下載http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html