js預覽上傳圖片
① 我需要一個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源碼。
② 怎樣用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上傳圖片壓縮-如何利用JS或者CSS樣式來自動調整圖片大小
如何在前端用js進行多圖片上傳產品提了一個需求,要求在一個html中實現多行多圖片上傳,原型圖如下:
2.1:html
html頁面由前端實現,此處增加<ul><li></li></ul>是為了配合圖片單擊放大圖片功能的實現
<ul_d="ul_other">
<li><inputtype="file"id="file_other"class="file_input"onchange="add_file_image('other')"></li>
</ul>
2.2:js
varimgSrc_other=[];
varimgFile_other=[];
functionadd_file_image(id){
varfileList=("file_"+id).files;//js獲取文件對象
if(verificationFile(fileList[0])){
for(vari=0;i
varimgSrcI=getObjectURL(fileList[i]);
if(id=="other"){
imgSrc_(imgSrcI);
if(fileList[i].size/1024>100){//大於100kb,進行壓縮上傳
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_(res);
})
}else{
imgFile_(res);
}
}
addNewContent(id);
}
}
//新增圖片
functionaddNewContent(obj){
//刪除原先
$("#ul_"+obj).html("");
//判斷循環新增
var_ext="";
if(obj=="other"){
for(vara=0;a<imgSrc_;a++){
text+='<li><inputtype="file"id="file_other"class="file_input"onchange="add_file_image('other')"></li>'
}
}else{
('臟數據');
}
varoldBox="<li><divclass="filediv"><span>+</span> "+
"<inputtype="file"id="file_"+obj+""_lass="file_input"onchange="add_file_image('"+obj+"')"> "+
"</div></li>";
$("#ul_"+obj).html(text+localText);
}
使用formData上傳
varform=("form_addArchive");//表單id
varformData=newFormData(form);
$.each(imgFile_other,function(i,file){
('imgFileOther',file);
});
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data){
}
},
error:function(XMLHttpRequest,textStatus,errorThrown){
}
})
後台使用@RequestParam(value="imgFileOther",required=false)List<MultipartFile>imgFileOther,接受
//獲取圖片url以便顯示
//文件格式驗證
//圖片壓縮
js壓縮圖片最低能壓縮多百分之多少js最低能壓縮百分之一,最大可放大至原來的5倍2.????最小可縮放至原來的百分之10第二種保持圖片寬度長度不變改變圖片質量,但不能用於放大圖片最小可壓縮至原圖的百分之一
如何利用JS或者CSS樣式來自動調整圖片大小js版和css版自動按比例調整圖片大小方法,分別如下:
<title>javascript圖片大小處理函數</title>
<script_anguage=Javascript>
var_roMaxHeight=150;
var_roMaxWidth=110;
function_roDownImage(ImgD){
___var_mage=new_mage();
___=;
___if(>0&&>0){
___var_ate=(proMaxWidth/<_roMaxHeight/)?proMaxWidth/:proMaxHeight/;
__if(rate<=1){_
___=*rate;
___=*rate;
__}
__else_
_____________=;
_____________=;
_________}
___}
}
</script>
</head>
<body>
<img_rc=""_order=0_idth="150"_eight="110"_onload=proDownImage(this);_/>
<img_rc=""_order=0_idth="150"_eight="110"_nload=proDownImage(this);_/>
</body>
純css的防止圖片撐破頁面的代碼,圖片會自動按比例縮小:
<style_ype="text/css">
.content-width_MARGIN:_uto;WIDTH:600px;}
.content-width_mg{MAX-WIDTH:100%!important;HEIGHT:_uto!important;width:expression(>600?"600px":)!important;}
</style>
<div_lass="content-width">
_<p><img_rc="/down/js/images/"/></p>
_<p><img_rc="/down/js/images/"/></p>
</div>
④ 客戶端限制只能上傳jpg格式圖片的js代碼
復制代碼
代碼如下:
function
checkPhoto(fnUpload)
{
var
filename
=
fnUpload.value;
alert(filename);
var
mime
=
filename.toLowerCase().substr(filename.lastIndexOf("."));
if(mime!=".jpg")
{
alert("請選擇jpg格式的照片上傳");
fnUpload.outerHTML=fnUpload.outerHTML;
}
}
⑤ 求js或JQ代碼，實現圖片上傳後在指定的div中以背景圖顯示
如果是background的話使用 $("div").css("background-image","圖片地址")，如果使用的img的話使用$("div").attr("src","地址");關鍵就是獲取圖片地址給弄上去
⑥ js 跨頁面url傳遞參數，例如A上面上傳圖片，B頁面獲取圖片怎麼做
給你個思路
A頁面 獲取上傳圖片的img.src 然後轉頁面的時候這樣
window.location.href= "b.html" + image_url;
傳給b頁面
B頁面通過
window.location.search.substring(）
來獲取圖片地址，在
var image = new Image();
image.src = image_url;
$("#Img").append(image);
放進去就行了
⑦ jquery.uploadify.js怎麼改變圖片回顯的順序，就是上傳的第一張在第一位，最後一個在最後
後台方法：
public JsonResult Handler(string guid, string dir = "Patent")
{
try
{
var filePath = "/Upload/" + dir + "/Img/";
var relativeUrls = new List<string>();
var imageIDs = new List<int>();
foreach (string f in Request.Files)
{
Image image = new Image();
image.Guid = Guid.Parse(guid);
//獲取提交的文件
HttpPostedFileBase postFile = Request.Files[f];
if (postFile.ContentLength == 0)
continue;
var fileExtension = Path.GetExtension(postFile.FileName);
if (!Directory.Exists(Server.MapPath(filePath)))
{
Directory.CreateDirectory(Server.MapPath(filePath));
}
var fileName = Guid.NewGuid().ToString("N");
image.Name = fileName;
// 組合文件存儲的相對路徑
var relativeUrl = filePath + fileName + fileExtension;
image.Url = relativeUrl;
// 將相對路徑轉換成物理路徑
var path = Server.MapPath(relativeUrl);
postFile.SaveAs(path);
imageRepository.Add(image);
imageRepository.Save();
imageIDs.Add(image.ID);
relativeUrls.Add(relativeUrl);
}
return Json(new { state = true, msg = "上傳成功", imageUrl = relativeUrls, IDS = imageIDs }, JsonRequestBehavior.DenyGet);
}
catch
{
}
return Json(new { state = false, msg = "上傳失敗" }, JsonRequestBehavior.DenyGet);
}
//上傳圖片
$("#fileuploader").uploadFile({
url: '@Url.Content("~/Upload/Handler?guid=")' + patentGuid,
dragDrop: false,
fileName: "file",
showProgress: false,
onSuccess: function (files, response, xhr) {
if (response.state) {
$(".am-u-sm-9 .ajax-file-upload-statusbar").remove();
//按順序展示你的圖片
addImg(response.imageUrl, response.ID);
} else {
alert(response.msg);
}
}
});