jquery怎麼上傳圖片_jquery如何將頁面生成的圖片上傳到伺服器

Ⅰ 這是上傳圖片Jquery,我像上傳文檔格式該怎麼寫呢

代碼很簡單，常見的圖片格式均已加入驗證之中，小夥伴們可以直接拿去用的。
廢話少說，直接上代碼
復制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form01").change( function(){
var filepath=$("input[name='myFile']").val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
alert("圖片限於bmp,png,gif,jpeg,jpg格式");
return false;
}else{$("#name01").text(ext)}
var file_size = 0;
if ( $.browser.msie) {
var img=new Image();
img.src=filepath;
while(true){
if(img.fileSize > 0){
if(img.fileSize>3*1024*1024){
alert("圖片不大於100MB。");
}else{
var num03 = img.fileSize/1024;
num04 = num03.toFixed(2)
$(".size02").text(num04+"KB");
}
break;
}
}
} else {
file_size = this.files[0].size;
console.log(file_size/1024/1024 + " MB");
var size = file_size / 1024;
if(size > 10240){
alert("上傳的文件大小不能超過10M！");
}else{
var num01 = file_size/1024;
num02 = num01.toFixed(2)
$("#size01").text(num02 + " KB");
}
}
return true;
});
});
</script>
<title>無標題文檔</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="72" id="name01"> </td>
<td width="242"><input type="file" name="myFile" id="form01" /></td>
<td width="184" id="size01" class="size02"> </td>
</tr>
</table>
</body>
</html>

以上代碼超級簡單，小夥伴們使用的時候自己記得美化下，這里就不多做解釋了。

Ⅱ 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>

Ⅲ js/jquery上傳圖片的問題

Ⅳ 求一段JS或Jquery非同步上傳圖片的代碼

圖片和文件等流媒體上傳都是靠from表單的提交。

你可以設置一個隱藏的from表單

裡面有個<input id='file' type='file'>

選擇玩圖片之後賦值給file

然後用jquery from表單提交即可

<formid="form"runat="server"enctype="multipart/form-data">
<inputid='file'type='file'>
</from>

$.ajax({
url:'XXXX',//上傳後台路徑
data:$('#form').serialize(),
type:"POST",
success:function(){

}
});

Ⅳ js/jquery如何實現一張圖片的上傳預覽功能。。。。

使用AJAX，把文件保存到臨時目錄，把返回的值（文件路徑），放到頁面上預先添加的<IMG> 標簽中，就可顯示預覽圖片，再點上傳才把文件從臨時目錄（刪除臨時目錄文件）復制到你指定的目錄中

Ⅵ jquery怎麼打開本地圖片預覽，點擊確定後上傳

1, tapmodo / Jcrop
Jcrop是人氣最高的圖片裁剪jQuery插件，stars數量2k+，功能非常豐富，文檔齊全，首選。Github.com官網也使用了這個插件。有一個小細節是，邊框線的螞蟻線是動畫的，真的很用心。

2, fengyuanchen / cropper
Cropper也是一款圖片裁剪jQuery插件，stars數量1k+，是杭州的前端工程師Fengyuan Chen所寫的，功能也相當豐富，裁剪時還可以對原圖進行旋轉。

3, imgAreaSelect 也是比較經典的圖片裁剪jQuery插件，我很久以前就在自己的項目中使用過，stars數量500+。

http://blog.csdn.net/cuixiping/article/details/45966177

Ⅶ 怎樣用js或者jq實現點擊這個圖片就可以選擇上傳還有預覽圖片啊

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<h3>請選擇圖片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br><br><img src="" id="img0" width="120">
</form>
</body>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
{
$("#img0").attr("src", objUrl);
$("#img0").removeClass("hide");
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file)
{
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 ;
}
$('input').on('change',function(){
var value = $(this).val();
value = value.split("\\")[2];
alert(value);
})
</script>
</html>

Ⅷ 用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即可。

Ⅸ jquery能不能實現圖片上傳到資料庫啊

AJAX可以，但也是要寫後台的，純JS或者JQUERY是無法直接和資料庫交互的。

Ⅹ jqueryajax不能上傳圖片

不能上傳的原因可能是jquery插件使用不正確。

解決方法：

1、在head之間加入jquery引用

<scripttype="text/javascript" src="jquery.js"></script>

<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>

<scriptsrc="project/js/fileload.js" type="text/javascript"></script>

2、定義fileload.js，代碼如下：

3、服務端處理上傳。

protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//開始上傳
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);

}
catch(Exception ex)
{
Response.Write("0|error|上傳提交出錯");
}

}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//獲取要保存的文件信息
string filerealname = httpFile.FileName;
//獲得文件擴展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//檢查保存的路徑是否有/結尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";

//按日期歸類保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}

//物理完整路徑
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;

//檢查是否有該路徑沒有就創建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}

//得到伺服器文件保存路徑
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//將文件保存至伺服器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上傳成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上傳失敗,錯誤原因：" + e.Message;
}
}

/// <summary>
/// 獲取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 檢查是否為合法的上傳文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;

}

public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}

4、運行defualt.aspx頁面以後顯示的效果是：

導航:首頁 > 動漫圖片 > jquery怎麼上傳圖片

jquery怎麼上傳圖片

與jquery怎麼上傳圖片相關的資料