ajaxfileupload.js implements file upload (with step code)
这次给大家带来ajaxfileupload.js实现文件上传(附步骤代码),ajaxfileupload.js实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。
AjaxUpLoad.js的使用实现无刷新文件上传,如图
1、创建页面并编写HTML上传文档:
<p class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileName" /> <input type="button" id="btnUploadFile" value="上传" /> <input type="button" id="btnDeleteFile" value="删除" /> </p>
上传图片:
<p class="uploadImg"> <img id="imgShow" src="/images/nophoto.gif" /> <input type="hidden" id="hidImgName" /> <input type="button" id="btnUploadImg" value="上传" /> <input type="button" id="btnDeleteImg" value="删除" /> </p>
2、引用AjaxUpload.js文件
3、编写JS脚本
window.onload = function() { init(); //初始化 } //初始化 function init() { //初始化文档上传 var btnFile = document.getElementById("btnUploadFile"); var doc = document.getElementById("doc"); var hidFileName = document.getElementById("hidFileName"); document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); }; g_AjxUploadFile(btnFile, doc, hidFileName); //初始化图片上传 var btnImg = document.getElementById("btnUploadImg"); var img = document.getElementById("imgShow"); var hidImgName = document.getElementById("hidImgName"); document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); }; g_AjxUploadImg(btnImg, img, hidImgName); } var g_AjxTempDir = "/file/temp/"; //文档上传 function g_AjxUploadFile(btn, doc, hidPut, action) { var button = btn, interval; new AjaxUpload(button, { action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action), data: {}, name: 'myfile', onSubmit: function(file, ext) { if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) { alert("您上传的文档格式不对,请重新选择!"); return false; } }, onComplete: function(file, response) { flagValue = response; if (flagValue == "1") { alert("您上传的文档格式不对,请重新选择!"); } else if (flagValue == "2") { alert("您上传的文档大于2M,请重新选择!"); } else if (flagValue == "3") { alert("文档上传失败!"); } else { hidPut.value = response; doc.innerHTML="<a href='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>"; } } }); } //图片上传 function g_AjxUploadImg(btn, img, hidPut) { var button = btn, interval; new AjaxUpload(button, { action: '/Common/UploadHandler.ashx?fileType=img', data: {}, name: 'myfile', onSubmit: function(file, ext) { if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) { alert("您上传的图片格式不对,请重新选择!"); return false; } }, onComplete: function(file, response) { flagValue = response; if (flagValue == "1") { alert("您上传的图片格式不对,请重新选择!"); } else if (flagValue == "2") { alert("您上传的图片大于200K,请重新选择!"); } else if (flagValue == "3") { alert("图片上传失败!"); } else { hidPut.value = response; img.src = g_AjxTempDir + response; } } }); } //删除文档 function DelFile(doc, hidPut) { hidPut.value = ""; doc.innerHTML = "<input type=\"text\" disabled=\"disabled\" />"; } //删除图片 function DelImg(img, hidPut) { hidPut.value = ""; img.src = "/images/nophoto.gif"; }
4、创建/Common/UploadHandler.ashx处理程序
<%@ WebHandler Language="C#" Class="UploadHandler" %> using System; using System.Web; using System.Text.RegularExpressions; using System.IO; public class UploadHandler : IHttpHandler { private string _filedir = ""; //文件目录 /// <summary> /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功) /// </summary> /// <param name="context"></param> public void ProcessRequest (HttpContext context) { _filedir = context.Server.MapPath(@"/file/temp/"); try { string result = "3"; string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型 if (fileType == "file") { result = UploadFile(context); //文档上传 } else if (fileType == "img") { result = UploadImg(context); //图片上传 } context.Response.Write(result); } catch { context.Response.Write("3");//3文件上传失败 } } /// <summary> /// 文档上传 /// </summary> /// <param name="context"></param> /// <returns></returns> private string UploadFile(HttpContext context) { int cout = context.Request.Files.Count; if (cout > 0) { HttpPostedFile hpf = context.Request.Files[0]; if (hpf != null) { string fileExt = Path.GetExtension(hpf.FileName).ToLower(); //只能上传文件,过滤不可上传的文件类型 string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......"; if (fileFilt.IndexOf(fileExt) <= -1) { return "1"; } //判断文件大小 int length = hpf.ContentLength; if (length > 2097152) { return "2"; } Random rd = new Random(); DateTime nowTime = DateTime.Now; string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); if (!Directory.Exists(_filedir)) { Directory.CreateDirectory(_filedir); } string fileName = _filedir + newFileName; hpf.SaveAs(fileName); return newFileName; } } return "3"; } /// <summary> /// 图片上传 /// </summary> /// <param name="context"></param> /// <returns></returns> private string UploadImg(HttpContext context) { int cout = context.Request.Files.Count; if (cout > 0) { HttpPostedFile hpf = context.Request.Files[0]; if (hpf != null) { string fileExt = Path.GetExtension(hpf.FileName).ToLower(); //只能上传文件,过滤不可上传的文件类型 string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......"; if (fileFilt.IndexOf(fileExt) <= -1) { return "1"; } //判断文件大小 int length = hpf.ContentLength; if (length > 204800) { return "2"; } Random rd = new Random(); DateTime nowTime = DateTime.Now; string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); if (!Directory.Exists(_filedir)) { Directory.CreateDirectory(_filedir); } string fileName = _filedir + newFileName; hpf.SaveAs(fileName); return newFileName; } } return "3"; } #region IHttpHandler 成员 public bool IsReusable { get { throw new NotImplementedException(); } } #endregion }
附件1:页面CSS样式
/*上传文件*/ .uploadFile{margin-bottom:10px;} /*上传图片*/ .uploadImg{} .uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}
附件2:AjaxUpload.js文件
/** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums * Licensed under the MIT license ( http://valums.com/mit-license/ ) * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions */ (function () { /* global window */ /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */ /** * Wrapper for FireBug's console.log */ function log() { if (typeof(console) != 'undefined' && typeof(console.log) == 'function') { Array.prototype.unshift.call(arguments, '[Ajax Upload]'); console.log(Array.prototype.join.call(arguments, ' ')); } } /** * Attaches event to a dom element. * @param {Element} el * @param type event name * @param fn callback This refers to the passed element */ function addEvent(el, type, fn) { if (el.addEventListener) { el.addEventListener(type, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + type, function () { fn.call(el); }); } else { throw new Error('not supported or DOM not loaded'); } } /** * Attaches resize event to a window, limiting * number of event fired. Fires only when encounteres * delay of 100 after series of events. * * Some browsers fire event multiple times when resizing * http://www.quirksmode.org/dom/events/resize.html * * @param fn callback This refers to the passed element */ function addResizeEvent(fn) { var timeout; addEvent(window, 'resize', function () { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(fn, 100); }); } // Needs more testing, will be rewriten for next version // getOffset function copied from jQuery lib (http://jquery.com/) if (document.documentElement.getBoundingClientRect) { // Get Offset using getBoundingClientRect // http://ejohn.org/blog/getboundingclientrect-is-awesome/ var getOffset = function (el) { var box = el.getBoundingClientRect(); var doc = el.ownerDocument; var body = doc.body; var docElem = doc.documentElement; // for ie var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; // In Internet Explorer 7 getBoundingClientRect property is treated as physical, // while others are logical. Make all logical, like in IE8. var zoom = 1; if (body.getBoundingClientRect) { var bound = body.getBoundingClientRect(); zoom = (bound.right - bound.left) / body.clientWidth; } if (zoom > 1) { clientTop = 0; clientLeft = 0; } var top = box.top / zoom + (window.pageYOffset || docElem && docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop, left = box.left / zoom + (window.pageXOffset || docElem && docElem.scrollLeft / zoom || body.scrollLeft / zoom) - clientLeft; return { top: top, left: left }; }; } else { // Get offset adding all offsets var getOffset = function (el) { var top = 0, left = 0; do { top += el.offsetTop || 0; left += el.offsetLeft || 0; el = el.offsetParent; } while (el); return { left: left, top: top }; }; } /** * Returns left, top, right and bottom properties describing the border-box, * in pixels, with the top-left relative to the body * @param {Element} el * @return {Object} Contains left, top, right,bottom */ function getBox(el) { var left, right, top, bottom; var offset = getOffset(el); left = offset.left; top = offset.top; right = left + el.offsetWidth; bottom = top + el.offsetHeight; return { left: left, right: right, top: top, bottom: bottom }; } /** * Helper that takes object literal * and add all properties to element.style * @param {Element} el * @param {Object} styles */ function addStyles(el, styles) { for (var name in styles) { if (styles.hasOwnProperty(name)) { el.style[name] = styles[name]; } } } /** * Function places an absolutely positioned * element on top of the specified element * copying position and dimentions. * @param {Element} from * @param {Element} to */ function copyLayout(from, to) { var box = getBox(from); addStyles(to, { position: 'absolute', left: box.left + 'px', top: box.top + 'px', width: from.offsetWidth + 'px', height: from.offsetHeight + 'px' }); } /** * Creates and returns element from html chunk * Uses innerHTML to create an element */ var toElement = (function () { var p = document.createElement('p'); return function (html) { p.innerHTML = html; var el = p.firstChild; return p.removeChild(el); }; })(); /** * Function generates unique id * @return unique id */ var getUID = (function () { var id = 0; return function () { return 'ValumsAjaxUpload' + id++; }; })(); /** * Get file name from path * @param {String} file path to file * @return filename */ function fileFromPath(file) { return file.replace(/.*(\/|\\)/, ""); } /** * Get file extension lowercase * @param {String} file name * @return file extenstion */ function getExt(file) { return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : ''; } function hasClass(el, name) { var re = new RegExp('\\b' + name + '\\b'); return re.test(el.className); } function addClass(el, name) { if (!hasClass(el, name)) { el.className += ' ' + name; } } function removeClass(el, name) { var re = new RegExp('\\b' + name + '\\b'); el.className = el.className.replace(re, ''); } function removeNode(el) { el.parentNode.removeChild(el); } /** * Easy styling and uploading * @constructor * @param button An element you want convert to * upload button. Tested dimentions up to 500x500px * @param {Object} options See defaults below. */ window.AjaxUpload = function (button, options) { this._settings = { // Location of the server-side upload script action: 'upload.php', // File upload name name: 'userfile', // Additional data to send data: {}, // Submit file as soon as it's selected autoSubmit: true, // The type of data that you're expecting back from the server. // html and xml are detected automatically. // Only useful when you are using json data as a response. // Set to "json" in that case. responseType: false, // Class applied to button when mouse is hovered hoverClass: 'hover', // Class applied to button when AU is disabled disabledClass: 'disabled', // When user selects a file, useful with autoSubmit disabled // You can return false to cancel upload onChange: function (file, extension) {}, // Callback to fire before file is uploaded // You can return false to cancel upload onSubmit: function (file, extension) {}, // Fired when file upload is completed // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE! onComplete: function (file, response) {} }; // Merge the users options with our defaults for (var i in options) { if (options.hasOwnProperty(i)) { this._settings[i] = options[i]; } } // button isn't necessary a dom element if (button.jquery) { // jQuery object was passed button = button[0]; } else if (typeof button == "string") { if (/^#.*/.test(button)) { // If jQuery user passes #elementId don't break it button = button.slice(1); } button = document.getElementById(button); } if (!button || button.nodeType !== 1) { throw new Error("Please make sure that you're passing a valid element"); } if (button.nodeName.toUpperCase() == 'A') { // disable link addEvent(button, 'click', function (e) { if (e && e.preventDefault) { e.preventDefault(); } else if (window.event) { window.event.returnValue = false; } }); } // DOM element this._button = button; // DOM element this._input = null; // If disabled clicking on button won't do anything this._disabled = false; // if the button was disabled before refresh if will remain // disabled in FireFox, let's fix it this.enable(); this._rerouteClicks(); }; // assigning methods to our class AjaxUpload.prototype = { setData: function (data) { this._settings.data = data; }, disable: function () { addClass(this._button, this._settings.disabledClass); this._disabled = true; var nodeName = this._button.nodeName.toUpperCase(); if (nodeName == 'INPUT' || nodeName == 'BUTTON') { this._button.setAttribute('disabled', 'disabled'); } // hide input if (this._input) { // We use visibility instead of display to fix problem with Safari 4 // The problem is that the value of input doesn't change if it // has display none when user selects a file this._input.parentNode.style.visibility = 'hidden'; } }, enable: function () { removeClass(this._button, this._settings.disabledClass); this._button.removeAttribute('disabled'); this._disabled = false; }, /** * Creates invisible file input * that will hover above the button * <p><input type='file' /></p> */ _createInput: function () { var self = this; var input = document.createElement("input"); input.setAttribute('type', 'file'); input.setAttribute('name', this._settings.name); addStyles(input, { 'position': 'absolute', // in Opera only 'browse' button // is clickable and it is located at // the right side of the input 'right': 0, 'margin': 0, 'padding': 0, 'fontSize': '480px', 'cursor': 'pointer' }); var p = document.createElement("p"); addStyles(p, { 'display': 'block', 'position': 'absolute', 'overflow': 'hidden', 'margin': 0, 'padding': 0, 'opacity': 0, // Make sure browse button is in the right side // in Internet Explorer 'direction': 'ltr', //Max zIndex supported by Opera 9.0-9.2 'zIndex': 2147483583 }); // Make sure that element opacity exists. // Otherwise use IE filter if (p.style.opacity !== "0") { if (typeof(p.filters) == 'undefined') { throw new Error('Opacity not supported by the browser'); } p.style.filter = "alpha(opacity=0)"; } addEvent(input, 'change', function () { if (!input || input.value === '') { return; } // Get filename from input, required // as some browsers have path instead of it var file = fileFromPath(input.value); if (false === self._settings.onChange.call(self, file, getExt(file))) { self._clearInput(); return; } // Submit form when value is changed if (self._settings.autoSubmit) { self.submit(); } }); addEvent(input, 'mouseover', function () { addClass(self._button, self._settings.hoverClass); }); addEvent(input, 'mouseout', function () { removeClass(self._button, self._settings.hoverClass); // We use visibility instead of display to fix problem with Safari 4 // The problem is that the value of input doesn't change if it // has display none when user selects a file input.parentNode.style.visibility = 'hidden'; }); p.appendChild(input); document.body.appendChild(p); this._input = input; }, _clearInput: function () { if (!this._input) { return; } // this._input.value = ''; Doesn't work in IE6 removeNode(this._input.parentNode); this._input = null; this._createInput(); removeClass(this._button, this._settings.hoverClass); }, /** * Function makes sure that when user clicks upload button, * the this._input is clicked instead */ _rerouteClicks: function () { var self = this; // IE will later display 'access denied' error // if you use using self._input.click() // other browsers just ignore click() addEvent(self._button, 'mouseover', function () { if (self._disabled) { return; } if (!self._input) { self._createInput(); } var p = self._input.parentNode; copyLayout(self._button, p); p.style.visibility = 'visible'; }); // commented because we now hide input on mouseleave /** * When the window is resized the elements * can be misaligned if button position depends * on window size */ //addResizeEvent(function(){ // if (self._input){ // copyLayout(self._button, self._input.parentNode); // } //}); }, /** * Creates iframe with unique name * @return {Element} iframe */ _createIframe: function () { // We can't use getTime, because it sometimes return // same value in safari :( var id = getUID(); // We can't use following code as the name attribute // won't be properly registered in IE6, and new window // on form submit will open // var iframe = document.createElement('iframe'); // iframe.setAttribute('name', id); var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />'); // src="javascript:false; was added // because it possibly removes ie6 prompt // "This page contains both secure and nonsecure items" // Anyway, it doesn't do any harm. iframe.setAttribute('id', id); iframe.style.display = 'none'; document.body.appendChild(iframe); return iframe; }, /** * Creates form, that will be submitted to iframe * @param {Element} iframe Where to submit * @return {Element} form */ _createForm: function (iframe) { var settings = this._settings; // We can't use the following code in IE6 // var form = document.createElement('form'); // form.setAttribute('method', 'post'); // form.setAttribute('enctype', 'multipart/form-data'); // Because in this case file won't be attached to request var form = toElement('<form method="post" enctype="multipart/form-data"></form>'); form.setAttribute('action', settings.action); form.setAttribute('target', iframe.name); form.style.display = 'none'; document.body.appendChild(form); // Create hidden input element for each data key for (var prop in settings.data) { if (settings.data.hasOwnProperty(prop)) { var el = document.createElement("input"); el.setAttribute('type', 'hidden'); el.setAttribute('name', prop); el.setAttribute('value', settings.data[prop]); form.appendChild(el); } } return form; }, /** * Gets response from iframe and fires onComplete event when ready * @param iframe * @param file Filename to use in onComplete callback */ _getResponse: function (iframe, file) { // getting response var toDeleteFlag = false, self = this, settings = this._settings; addEvent(iframe, 'load', function () { if ( // For Safari iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For FF, IE iframe.src == "javascript:'<html></html>';") { // First time around, do not delete. // We reload to blank page, so that reloading main page // does not re-submit the post. if (toDeleteFlag) { // Fix busy state in FF3 setTimeout(function () { removeNode(iframe); }, 0); } return; } var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document; // fixing Opera 9.26,10.00 if (doc.readyState && doc.readyState != 'complete') { // Opera fires load event multiple times // Even when the DOM is not ready yet // this fix should not affect other browsers return; } // fixing Opera 9.64 if (doc.body && doc.body.innerHTML == "false") { // In Opera 9.64 event was fired second time // when body.innerHTML changed from false // to server response approx. after 1 sec return; } var response; if (doc.XMLDocument) { // response is a xml document Internet Explorer property response = doc.XMLDocument; } else if (doc.body) { // response is html document or plain text response = doc.body.innerHTML; if (settings.responseType && settings.responseType.toLowerCase() == 'json') { // If the document was sent as 'application/javascript' or // 'text/javascript', then the browser wraps the text in a <pre class="brush:php;toolbar:false"> // tag and performs html encoding on the contents. In this case, // we need to pull the original text content from the text node's // nodeValue property to retrieve the unmangled content. // Note that IE6 only understands text/html if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE') { response = doc.body.firstChild.firstChild.nodeValue; } if (response) { response = eval("(" + response + ")"); } else { response = {}; } } } else { // response is a xml document response = doc; } settings.onComplete.call(self, file, response); // Reload blank page, so that reloading main page // does not re-submit the post. Also, remember to // delete the frame toDeleteFlag = true; // Fix IE mixed content issue iframe.src = "javascript:'<html></html>';"; }); }, /** * Upload file contained in this._input */ submit: function () { var self = this, settings = this._settings; if (!this._input || this._input.value === '') { return; } var file = fileFromPath(this._input.value); // user returned false to cancel upload if (false === settings.onSubmit.call(this, file, getExt(file))) { this._clearInput(); return; } // sending request var iframe = this._createIframe(); var form = this._createForm(iframe); // assuming following structure // p -> input type='file' removeNode(this._input.parentNode); removeClass(self._button, self._settings.hoverClass); form.appendChild(this._input); form.submit(); // request set, clean up removeNode(form); form = null; removeNode(this._input); this._input = null; // Get response from iframe and fire onComplete event when ready this._getResponse(iframe, file); // get ready for next request this._createInput(); } }; })();
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of ajaxfileupload.js implements file upload (with step code). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

WeChat is one of the social media platforms in China that continuously launches new versions to provide a better user experience. Upgrading WeChat to the latest version is very important to keep in touch with family and colleagues, to stay in touch with friends, and to keep abreast of the latest developments. 1. Understand the features and improvements of the latest version. It is very important to understand the features and improvements of the latest version before upgrading WeChat. For performance improvements and bug fixes, you can learn about the various new features brought by the new version by checking the update notes on the WeChat official website or app store. 2. Check the current WeChat version We need to check the WeChat version currently installed on the mobile phone before upgrading WeChat. Click to open the WeChat application "Me" and then select the menu "About" where you can see the current WeChat version number. 3. Open the app

When logging into iTunesStore using AppleID, this error saying "This AppleID has not been used in iTunesStore" may be thrown on the screen. There are no error messages to worry about, you can fix them by following these solution sets. Fix 1 – Change Shipping Address The main reason why this prompt appears in iTunes Store is that you don’t have the correct address in your AppleID profile. Step 1 – First, open iPhone Settings on your iPhone. Step 2 – AppleID should be on top of all other settings. So, open it. Step 3 – Once there, open the “Payment & Shipping” option. Step 4 – Verify your access using Face ID. step

Having issues with the Shazam app on iPhone? Shazam helps you find songs by listening to them. However, if Shazam isn't working properly or doesn't recognize the song, you'll have to troubleshoot it manually. Repairing the Shazam app won't take long. So, without wasting any more time, follow the steps below to resolve issues with Shazam app. Fix 1 – Disable Bold Text Feature Bold text on iPhone may be the reason why Shazam is not working properly. Step 1 – You can only do this from your iPhone settings. So, open it. Step 2 – Next, open the “Display & Brightness” settings there. Step 3 – If you find that “Bold Text” is enabled

Windows 11, as the latest operating system launched by Microsoft, is deeply loved by users. In the process of using Windows 11, sometimes we need to obtain system administrator rights in order to perform some operations that require permissions. Next, we will introduce in detail the steps to obtain system administrator rights in Windows 11. The first step is to click "Start Menu". You can see the Windows icon in the lower left corner. Click the icon to open the "Start Menu". In the second step, find and click "

Screenshot feature not working on your iPhone? Taking a screenshot is very easy as you just need to hold down the Volume Up button and the Power button at the same time to grab your phone screen. However, there are other ways to capture frames on the device. Fix 1 – Using Assistive Touch Take a screenshot using the Assistive Touch feature. Step 1 – Go to your phone settings. Step 2 – Next, tap to open Accessibility settings. Step 3 – Open Touch settings. Step 4 – Next, open the Assistive Touch settings. Step 5 – Turn on Assistive Touch on your phone. Step 6 – Open “Customize Top Menu” to access it. Step 7 – Now you just need to link any of these functions to your screen capture. So click on the first

Is the clock app missing from your phone? The date and time will still appear on your iPhone's status bar. However, without the Clock app, you won’t be able to use world clock, stopwatch, alarm clock, and many other features. Therefore, fixing missing clock app should be at the top of your to-do list. These solutions can help you resolve this issue. Fix 1 – Place the Clock App If you mistakenly removed the Clock app from your home screen, you can put the Clock app back in its place. Step 1 – Unlock your iPhone and start swiping to the left until you reach the App Library page. Step 2 – Next, search for “clock” in the search box. Step 3 – When you see “Clock” below in the search results, press and hold it and

If you don't have control over the zoom level in Safari, getting things done can be tricky. So if Safari looks zoomed out, that might be a problem for you. Here are a few ways you can fix this minor zoom issue in Safari. 1. Cursor magnification: Select "Display" > "Cursor magnification" in the Safari menu bar. This will make the cursor more visible on the screen, making it easier to control. 2. Move the mouse: This may sound simple, but sometimes just moving the mouse to another location on the screen may automatically return it to normal size. 3. Use Keyboard Shortcuts Fix 1 – Reset Zoom Level You can control the zoom level directly from the Safari browser. Step 1 – When you are in Safari
