菜单

团结出手打造ajax图片上传(网上没有底)

2018年12月15日 - Ajax

明日作者需要一致款款图片上传插件,不过网上没提供相同迟迟符合自己需要都好用的。于是就融洽出手写了一个。

1、在CSHTML页面:

道1,仅用jquery代码,不用第三在插件。代码如下

 

<p> 
<label>上传图片</label> 
<input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /> 
<input type="button" id="uploadButton" value="Upload" /> 
</p> 
<script type="text/javascript"> 
$(function() { 
$('.inp_fileToUpload').change(function() { 
var formdata = new FormData(); 
var v_this = $(this); 
var fileObj = v_this.get(0).files; 
url = "/upload/upload_json.ashx"; 
//var fileObj=document.getElementById("fileToUpload").files; 
formdata.append("imgFile", fileObj[0]); 
jQuery.ajax({ 
url : url, 
type : 'post', 
data : formdata, 
cache : false, 
contentType : false, 
processData : false, 
dataType : "json", 
success : function(data) { 
if (data.error == 0) { 
v_this.parent().children(".img_upload").attr("src", data.url); 
//$("#img").attr("src",data.url); 
} 
} 
}); 
return false; 
}); 
}); 
</script>

援一下个别独jquery

这种艺术的欠缺:由于IE6\8\9\非匡助formdata,所以这种方法不帮助IE9及以下版本

<!–改文件的援用来做异步上传–>

方法二:使用ajaxfileupload.js插件
ajaxfileupload.js
html代码:

<script type=”text/javascript” src=”@Url.Content(“~/Scripts/jquery.form.js”)”></script>

<p> 
<label>ajax上传</label> 
<input type="file" name="fileToUpload" id="fileToUpload" class="inp_fileToUpload" multiple="multiple"/> 
<img src="$web.site$web.tpl#**#adminht/images/lb_head.jpg" width="30px" height="30px" class="img_upload" id="img" /> 
</p> 
<p> 
<label>最新修改人员:</label> 
<input readonly="readonly" type="text" size="30" /> 
</p> 
<div> 

<script type="text/javascript"> 
$(function() { 
$(".inp_fileToUpload").live("change", function() {//现在这个已经适用于多个file表单。 
ajaxFileUpload($(this).attr("id"), $(this).parent().children(".img_upload").attr("id")); 
}) 
}) 
function ajaxFileUpload(file_id, img_id) { 
jQuery.ajaxFileUpload({ 
url : '/upload/upload_json.ashx', //用于文件上传的服务器端请求地址 
secureuri : false, //是否需要安全协议,一般设置为false 
fileElementId : file_id, //文件上传域的ID 
dataType : 'json', //返回值类型 一般设置为json 
success : function(data, status)//服务器成功响应处理函数 
{ 
if (data.error == 0) { 
$("#" + img_id).attr("src", data.url); 
} else { 
alert(data.message); 
} 
}, 
error : function(data, status, e)//服务器响应失败处理函数 
{ 
alert(e); 
} 
}) 
return false; 
} 
</script> 
</div> 
</div>

<script type=”text/javascript”
src=”@Url.Content(“~/Scripts/jquery-1.5.1.min.js”)”></script>

证实:这种办法近期测试帮助IE8/9,Google,兼容于办法1吓。指出以方法2

 

文件上传后台处理代码(asp.net版)

前台的页面

<%@ webhandler Language="C#" class="Upload" %> 

using System; 
using System.Collections; 
using System.Web; 
using System.IO; 
using System.Globalization; 
using LitJson; 
public class Upload : IHttpHandler 
{ 
private HttpContext context; 
public void ProcessRequest(HttpContext context) 
{ 
String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1); 

//文件保存目录路径 
String savePath = "attached/"; 
//文件保存目录URL 
String saveUrl = aspxUrl + "attached/"; 
//定义允许上传的文件扩展名 
Hashtable extTable = new Hashtable(); 
extTable.Add("image", "gif,jpg,jpeg,png,bmp"); 
extTable.Add("flash", "swf,flv"); 
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); 
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); 
//最大文件大小 
int maxSize = 1000000; 
this.context = context; 
HttpPostedFile imgFile = context.Request.Files["imgFile"]; 
if (imgFile == null) 
{ 
showError("请选择文件。"); 
} 
String dirPath = context.Server.MapPath(savePath); 
if (!Directory.Exists(dirPath)) 
{ 
showError("上传目录不存在。"); 
} 
String dirName = context.Request.QueryString["dir"]; 
if (String.IsNullOrEmpty(dirName)) { 
dirName = "image"; 
} 
if (!extTable.ContainsKey(dirName)) { 
showError("目录名不正确。"); 
} 
String fileName = imgFile.FileName; 
String fileExt = Path.GetExtension(fileName).ToLower(); 
if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) 
{ 
showError("上传文件大小超过限制。"); 
} 
if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring(1).ToLower()) == -1) 
{ 
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。"); 
} 
//创建文件夹 
dirPath += dirName + "/"; 
saveUrl += dirName + "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo); 
dirPath += ymd + "/"; 
saveUrl += ymd + "/"; 
if (!Directory.Exists(dirPath)) { 
Directory.CreateDirectory(dirPath); 
} 
String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt; 
String filePath = dirPath + newFileName; 
imgFile.SaveAs(filePath); 
String fileUrl = saveUrl + newFileName; 
Hashtable hash = new Hashtable(); 
hash["error"] = 0; 
hash["url"] = fileUrl; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
private void showError(string message) 
{ 
Hashtable hash = new Hashtable(); 
hash["error"] = 1; 
hash["message"] = message; 
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); 
context.Response.Write(JsonMapper.ToJson(hash)); 
context.Response.End(); 
} 
public bool IsReusable 
{ 
get 
{ 
return true; 
} 
} 
}

 

乃或许感兴趣的稿子:

<p class=”mb15″> 

          <img src=”” id=”upLoadImageShow” width=”100″ height=”100″
/>

          <br />

          <a id=”system” style=”cursor: pointer;”
onclick=”selectSettingType()”>拔取上污染图片</a>

      </p>

      <p class=”mb15″>

<div id=”upload” class=”cb mt10″ style=”display: none;”>

 

                <div id=”upload_title” class=”mt10″>

                    <h4>采取地面图片上传</h4>

                    <span id=”errorInfoSpan”
class=”red”></span>

                </div>

                <iframe name=”hd” style=”display:
none;”></iframe>

                <form id=”fileForm” method=”post”
action=”@Url.Content(“~/Admin/File/ImageUpLoad”)”
enctype=”multipart/form-data” >

                    <input type=”file” name=”upImage” class=”mt10″  size=”50″ />

                    <input id=”btnUpload” type=”button” value=”上传”
/>

                    <span class=”gray”>图片格式 jpg/gif
小于1M</span><br />

                </form>

      </div>

 

脚是前台的javascript

 

function selectSettingType() {

          if (document.getElementById(“upload”).style.display == ‘none’)
{

              document.getElementById(“upload”).style.display = “block”;

              document.getElementById(“system”).style.display = “none”;

          } else {

              document.getElementById(“system”).style.display = “block”;

              document.getElementById(“upload”).style.display = “none”;

          }

      }//这多少个用来显示与隐形上传按钮,重假诺交互性会哼点要已经

function isImageFileName(str) {

          var reg = /([0-9]{1,}.jpg)|([0-9]{1,}.gif)/;

          if (reg.test(str)) {

              return true;

          }

          return false;

      }//这多少个函数是判定再次来到的价是休是含有图表,因为先天再次来到值有几乎种植,正确上传回到图片存储路径

$(function () {

          //异步上污染图片

          $(“#btnUpload”).click(function () {

              if ($(“#upImage”).val() == “”) {

                  alert(“请捎一个图形文件,再点击上传。”);

                  return;

              }

              alert(1);

              $(‘#fileForm’).ajaxSubmit({

                  success: function (msg) {

                      var start =
msg.indexOf(“>”);

                      if (start != -1)
{

                          var end =
msg.indexOf(“<“, start + 1);

                          if (end != -1)
{

                              msg =
msg.substring(start + 1, end);

                          }

                     
}//下面立等同段落是盖当Google等片段浏览器会导致获取之值包含<pre>标签

                      var regex = new
RegExp(“\””, “g”);

                      msg =
msg.replace(regex, “”)

//这段是发出头浏览器会受msg字符串加上双引号的签,现在即使失去丢对引号标签

if (isImageFileName(msg))

                      {

                          alert(msg);

                          $(“#upLoadImageShow”).attr(‘src’, msg);//这里是更安图片的地方

                      }

                      else

                          alert(msg);

                  }

              });

          });

      });

 

 

2、下面是FileController控制器的代码

 

namespace AutoLearning.Areas.Admin.Controllers

{

    /// <summary>

    /// 功用:文件上传控制器

    /// 开发者:刘日辉

    ///开发时间: 2013-7-17

    /// </summary>

    public class FileController : Controller

    {

 

        [HttpPost]

        public ActionResult ImageUpLoad()

        {

            //定义错误消息

            string msg = “”;

            //接受上传文件

            HttpPostedFileBase hp = Request.Files[“upImage”];

            if (hp == null)

            {

                msg = “请捎文件.”;

            }

            //获取上传目录 转换为大体路径

            string uploadPath =
Server.MapPath(“~/Areas/Admin/Contenttives/”);

            //获取文件称

            string fileName =
DateTime.Now.Ticks.ToString()+System.IO.Path.GetExtension(hp.FileName);

            //获取文件大小

            long contentLength = hp.ContentLength;

            //文件不可知超越1M

            if (contentLength > 1024 * 1024)

            {

                msg = “文件大小超越限定而求.”;

            }

            if (!checkFileExtension(fileName))

            {

                msg = “文件为不可上传的类型.”;

            }

            //保存文件之物理路径

            string saveFile = uploadPath + fileName;

            try

            {

                //保存文件

                hp.SaveAs(saveFile);

                msg = “/Areas/Admin/Contenttives/” + fileName;

            }

            catch {

                msg = “上传失利.”;

            }

            return Json(msg);

        }

        /// <summary>

        /// 检查文件后缀名是否符合要求

        /// </summary>

        /// <param name=”fileName”></param>

        /// <returns></returns>

        private bool checkFileExtension(string fileName)

        {

            //获取文件后缀

            string fileExtension =
System.IO.Path.GetExtension(fileName);

            if (fileExtension != null)

                fileExtension = fileExtension.ToLower();

            else

                return false;

 

            if (fileExtension != “.jpg” && fileExtension != “.gif”)

                return false;

 

            return true;

        }

 

    }

}

 

正文修改:解决IE环境下回到的JSON解析成下充斥文件之题材:

把controller里面的json(msg)修改成:

           JsonResult rs = Json(msg);

            rs.ContentType =
“text/html”;

            return rs;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图