jquery上傳圖片並顯示圖片

Ⅰ jquery中把一個圖片傳遞到另外一個頁面上顯示出來，怎麼做到好像是用base64解碼用cookie但是我失敗了

如果是同域名下的話 cookie 是沒問題的 建議跳轉的時候把圖片url傳過去吧

Ⅱ 怎麼用jquery或者javascript實現:如圖1的那個按鈕，可以讓上傳或預覽圖片

1、點擊圖1的那個按鈕可以讓用戶選擇上傳的圖片，選擇了一張就在按鈕前面預覽，如果用戶不想上傳某張圖片可以點擊x取消，再點擊上傳按鈕可以接著選擇圖片上傳。

2、設置選擇圖片的按鈕的 click 事件，去觸發 #upload_file 的 click 事件，然後就可以點擊圖片按鈕後，選擇本地圖片文件了。

3、設置上傳按鈕，其實一般手機版網頁是沒有上傳按鈕的，即選擇圖片後就通過 Ajax 上傳圖片了。

Ⅲ mvc視圖中怎麼上傳圖片並顯示

如果只是上傳的話那太容易了，如果還要顯示那就難了，因為要顯示的話就不能只向伺服器提交一次請求，必須非同步提交。下面的例子是我親自寫的，非同步提交上傳圖片並預覽。全部代碼都在。

返回到前台頁面的JSON格式對象是以類的對象。
publicclassReturnImage
{
publicstringbig{get;set;}
publicstringsmall{get;set;}
publicstringisSuccessfull{get;set;}
publicstringmessage{get;set;}
}

對於上傳和生成縮略圖，請自行完成，以下是ASP.NETMVC的例子。
publicclassHomeController:Controller
{
//
//GET:/Home/
publicActionResultIndex()
{
returnView();
}
///<summary>
///上傳圖片
///</summary>
///<returns></returns>
publicActionResultUploadImage()
{
//定義錯誤消息
JsonResultmsg=newJsonResult();
try
{
//接受上傳文件
HttpPostedFileBasepostFile=Request.Files["upImage"];
if(postFile!=null)
{
DateTimetime=DateTime.Now;
//獲取上傳目錄轉換為物理路徑
stringuploadPath=Server.MapPath("~/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/");
//文件名
stringfileName=time.ToString("yyyyMMddHHmmssfff");
//後綴名稱
stringfiletrype=System.IO.Path.GetExtension(postFile.FileName);
//獲取文件大小
longcontentLength=postFile.ContentLength;
//文件不能大於2M
if(contentLength<=1024*2048)
{
//如果不存在path目錄
if(!Directory.Exists(uploadPath))
{
//那麼就創建它
Directory.CreateDirectory(uploadPath);
}
//保存文件的物理路徑
stringsaveFile=uploadPath+fileName+"_big"+filetrype;
try
{
//保存文件
postFile.SaveAs(saveFile);
//保存縮略圖的物理路徑
stringsmall=uploadPath+fileName+"_small"+filetrype;
MakeThumbnail(saveFile,small,320,240,"W");
ReturnImageimage=newReturnImage();
image.big="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_big"+filetrype;
image.small="/UploadFiles/"+time.Year+"/"+time.ToString("yyyyMMdd")+"/"+fileName+"_small"+filetrype;
msg=Json(image);
}
catch
{
msg=Json("上傳失敗");
}
}
else
{
msg=Json("文件大小超過限制要求");
}
}
else
{
msg=Json("請選擇文件");
}
}
catch(Exceptione)
{
;
}
msg.ContentType="text/html";
returnmsg;
}
///<summary>

由於回答超過最大限制，///生成縮略圖的代碼請向我索取

Ⅳ jquery 點擊一次載入幾張圖片，再點擊再載入幾張圖片，一直到所有圖片都顯示，怎麼實現

varimgMana=function(){
//內部指針索引
this.idx=0;
//需要載入的圖片列表
this.imgs=[
'https://dimg04.c-ctrip.com/images/70010b0000005a2k71535_280_170_112.jpg',
'https://dimg04.c-ctrip.com/images/700f0c0000006nxnfD731_280_170_112.jpg',
'https://dimg04.c-ctrip.com/images/70020h0000008s9xx8ACF_280_170_112.jpg',
'https://dimg04.c-ctrip.com/images/700j0h0000008sx877A9B_280_170_112.jpg',
'https://dimg04.c-ctrip.com/images/700u0h0000008zdvbA836_1920_360_111.jpg'
];
//載入圖片num:載入的數量
this.loadImg=function(num){
num=num||1;
varinfo,len=this.idx+num;
for(this.idx;this.idx<len;this.idx++){
info=this.imgs[this.idx];
if(!info){
alert('圖片都載入完啦');
returnthis;
}
this.render(info);
}
}
//渲染圖片
this.render=function(img){
img&&$('body').append("<imgsrc='"+img+"'/>");
}
returnthis;
}

//使用方式
varimgM=newimgMana();
$('.button').click(function(){
imgM.loadImg(2);
});

Ⅳ 我需要一個js或者jquery能批量上傳圖片+預覽的功能。急~~~急~~~急~~

WebUploader項目，符合你的要求。

//文件上傳過程中創建進度條實時顯示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');

//避免重復創建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}

$percent.css('width',percentage*100+'%');
});
//文件上傳成功，給item添加成功class,用樣式標記上傳成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});

//文件上傳失敗，顯示上傳出錯。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');

//避免重復創建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}

$error.text('上傳失敗');
});

//完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});

更多細節，請查看js源碼。

Ⅵ jquery ajax多圖上傳顯示怎麼寫

首先我們在頁面上放置個上傳按鈕，使用POST提交到ajax.php。#ul_pics 用來顯示上傳完畢後的圖片。
<a class="btn" id="btn">上傳圖片</a> 最大500KB，支持jpg，gif，png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
接著，載入jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
當點擊按鈕「上傳圖片」後，彈出選擇文件對話框，按 "ctrl" 選擇多圖片上傳。然後調用 uploader.start() 方法，開始上傳。上傳中間過程我們可以用 UploadProgress 方法來顯示文件進度，最後通過 FileUploaded 來顯示對應的圖片。通過瀏覽器控制台，會發現上傳一張圖片，會向後台ajax.php請求一次。
var uploader = new plupload.Uploader({ //創建實例的構造方法
runtimes: 'html5,flash,silverlight,html4',
//上傳插件初始化選用那種方式的優先順序順序
browse_button: 'btn',
// 上傳按鈕
url: "ajax.php",
//遠程上傳地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上傳文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允許文件上傳類型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上傳, false 單文件上傳
init: {
FilesAdded: function(up, files) { //文件上傳前
if ($("#ul_pics").children("li").length > 30) {
alert("您上傳的圖片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍歷文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上傳中，顯示進度條
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上傳成功的時候觸發
var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();

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

Ⅷ js/jquery上傳圖片的問題

你可以使用jquery的一個插件uploadify，官網下載http://www.uploadify.com/
使用示例http://www.cnblogs.com/babycool/archive/2012/08/04/2623137.html

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

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