项目中遇到图片上传的情况,好多都是使用服务器上传控件进行上传的,很是麻烦,然后在网上找到了uploadify的方法,自己总结和修改后分享给大家.
项目文档预览:
1.原有css和js:
<link href="../BootStrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="../BootStrap/uploadify/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../BootStrap/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<script src="../BootStrap/My97DatePicker/WdatePicker.js"></script>
<script src="../BootStrap/ueditor/ueditor.config.js"></script>
<script src="../BootStrap/ueditor/ueditor.all.min.js"></script>
<link href="../BootStrap/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
2.HTML代码:
<div class="img_setting">
<div class="pic_demo">
</div>
<div class="upload_style">
<input type="file" name="upload_file" runat="server" id="upload_file" />
<div id="spamid"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></div>
<div style="display: none;">
<asp:TextBox class="form-control" ID="pictempcun" runat="server"></asp:TextBox>
</div>
</div>
</div>
3.为HTML代码添加样式:
<style>
.uploadify-queue {
display: none;
}
.img_setting {
margin: 0 auto;
padding: 2px;
}
.pic_demo {
margin: 0 auto;
padding: 10px;
float: left;
}
.upload_style {
padding: 10px;
margin: 0;
}
.imgBox {
display: inline;
display: inline-block;
padding: 0;
position: relative;
margin: 0 10px 10px 0;
line-height: 120px;
background-color: #c2c2c2;
}
.imgBox p {
height: auto;
display: none;
position: absolute;
left: 0;
bottom: 0;
}
.imgBox input {
line-height: 14px;
float: left;
font-size: 12px;
width: 20px;
}
.imgBox img {
width: 130px;
max-height: 130px;
vertical-align: middle;
}
.imgBox .editImg {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
display: none;
border: 1px solid #c2c2c2;
background-color: #fff;
font-size: 20px;
}
.imgBox .delImg {
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
display: none;
border: 1px solid #c2c2c2;
background-color: #fff;
font-size: 20px;
}
</style>
4.配置js:
<script type="text/javascript">
function isvalid() {
var Title = $("#txtOrderid").val();
if (Title == 0) {
alert("请输入订单号");
return false;
}
var cuntemp = $("#pictempcun").val();
if (cuntemp == "") {
alert("图片未上传或正在上传中...");
return false;
}
return true;
}
$(function () {
var file_count = 1;
var num = 1;
$("#upload_file").uploadify({
'swf': '../BootStrap/uploadify/uploadify.swf',//指定swf文件
'uploader': '../BootStrap/uploadify/uploadifyUpload.ashx',//调取后台处理方法
'folder': '../UploadFiles',//图片保存路径/images
'fileTypeExts': '*.gif; *.jpg; *.png',//文件上传类型后缀,不符合时有提醒
'fileSizeLimit': "2MB",//上传文件大小限制数
'auto': true,//选择后自动上传,默认值为true
'multi': false,//设置上传时是否可以选择多个,true可以,false禁止选中多个
'method': 'post',//提交方式(get或者post),默认是post
'buttonText': '选择图片',
//'buttonImage': '../BootStrap/uploadify/image/uploadify-cance.png',
'width': '128px',
'height': '128px',
'removeCompleted': true,
'removeTimeout': 1,
'uploadLimit': 999,//允许连续上传的次数,超过会提示
'onUploadSuccess': function (file, data, respone) {
var arr = data.split('|');
var chgDisplay = $('.pic_demo');//div类名images/
picDispaly({
div: chgDisplay,
url: arr[1]
});
function picDispaly(obj) {
var img = new Image();
img.src = "../UploadFiles/" + obj.url;
//$('#pictempcun').val(obj.url);
$(img).attr("data-url", obj.url);
var imgList = $('<div class="imgBox"><span class="editImg"><i class="icon icon-edit"></i></span><span class="delImg">×</span><p class="imgInfo"><input type="text" name="imgIndex" class="imgIndex" value="' + num + '" /></p></div>');
num += 1;
file_count += 1;
imgList.append(img);
$(obj.div).append(imgList);
}
chgDisplay.find('.imgBox').mouseenter(function (e) {
$(this).find('.delImg,.editImg').show();
}).mouseleave(function (e) {
$(this).find('.delImg,.editImg,.imgInfo').hide();
});
chgDisplay.find('.editImg').click(function (e) {
$(this).parent().find('.imgInfo').show();
});
chgDisplay.find('.delImg').click(function (e) {
$(this).parent().remove();
file_count -= 1;
if (file_count <= 5) {
$('#upload_file').show();
}
});
if (file_count > 5) {
$('#upload_file').hide();
$('#spamid').hide();
}
var piclists = document.getElementById("pictempcun").value;
piclists += data.split('|')[1] + ",";
document.getElementById("pictempcun").value = piclists;
},
'onCancel': function (event, queueId, fileObj, data) {
},
'onUploadError': function (file, errorCode, errorMsg, errorString) {
alert(errorMsg);
},
});
});
</script>
5.原有的jquery.uploadify.min.js中略微有些修改:
6.一般处理程序uploadifyUpload.ashx:
public class uploadifyUpload : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpFileCollection file = HttpContext.Current.Request.Files;
string result = "";
string uploadPath = context.Server.MapPath("../UploadFiles/images"+"\\");
if (file != null)
{
try
{
if (!System.IO.Directory.Exists(uploadPath))
{
System.IO.Directory.CreateDirectory(uploadPath);
}
DateTime dtnow = System.DateTime.Now;
string filename = dtnow.Year.ToString() + dtnow.Month.ToString() + dtnow.Day.ToString() + dtnow.Hour.ToString() + dtnow.Minute.ToString() + dtnow.Second.ToString() + dtnow.Millisecond.ToString();
string ExtName = getFileExt(file[0].FileName).ToUpper();
filename += "." + ExtName;
file[0].SaveAs(uploadPath + filename);
result = "1|" + filename + "";
}
catch
{
result = "0|";
}
}
else
{
result = "0|";
}
context.Response.Write(result); //标志位1标识上传成功,后面的可以返回前台的参数,比如上传后的路径等,中间使用|隔开
}
private string getFileExt(string fileName)
{
if (fileName.IndexOf(".") == -1)
return "";
string[] temp = fileName.Split('.');
return temp[temp.Length - 1].ToLower();
}
public bool IsReusable {
get {
return false;
}
}
6成果: