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);
}
}
});